Zure webgunea bizkortzea CSS Sprites-ekin

spritemaster webgunea

Orrialdeen abiadurari buruz dezente idazten dut gune honetan eta gure bezeroen guneetan egiten ditugun analisi eta hobekuntzen zati garrantzitsua da. Zerbitzari boteretsuetara joatea eta horrelako tresnak erabiltzeaz gain Edukia entregatzeko sareak, batez beste web garatzaileak erabil ditzakeen beste programazio teknika batzuk daude.

Jatorrizko Cascading Style Sheet orriaren estandarrak 15 urte baino gehiago ditu orain. CSS bilakaera garrantzitsua izan zen web garapenean, edukia diseinutik bereizten zuelako. Begiratu blog hau eta beste edozein, eta estiloaren diferentziaren gehiengoa erantsitako estilo orrian dago. Estilo orriak ere garrantzitsuak dira, zure arakatzailearen cache batean gordetzen baitira lokalean. Ondorioz, jendeak zure webgunea bisitatzen jarraitzen duen heinean, ez dute estilo orririk deskargatzen aldi bakoitzean ... orrialdearen edukia baizik.

Askotan gutxi erabiltzen den CSSren elementu bat da CSS Sprites. Erabiltzaile batek zure webgunea bisitatzen duenean, agian ez zara konturatuko ez direla orriaren eskaera bakarra egiten. Haiek eskaera anitz egin… Orriaren eskaera, estilo orriak, erantsitako JavaScript fitxategiak eta irudi bakoitza. Ertzetarako, nabigazio barretarako, atzeko planoetarako, botoietarako eta abarretarako irudi sorta bat duen gai bat baduzu, arakatzaileak bakoitzak webguneko zerbitzariari eskatu behar dio. Biderkatu hori milaka bisitariz eta zure zerbitzarian egindako milaka eskaera izan daitezke!

Honek, zure webgunea moteltzen du. A gune motelak eragin izugarria izan dezake konpromisoan eta bihurketetan zure ikusleek egiten dutena. Web garatzaile handiek erabiltzen duten estrategia irudi guztiak fitxategi bakarrean jartzea da ... a izenarekin sprite. Fitxategiaren irudi bakoitzerako eskaera egin beharrean, orain sprite irudi bakarraren eskaera bakarra egon behar da!

Irakurri dezakezu nola funtzionatzen duten CSS Sprites-ek CSS-Tricks-en or Smashing Magazine-ren CSS Sprite mezua. Nire asmoa ez da nola erabili erakustea, zure garapen taldeak gunean sartuko dituela ziurtatzeko aholkua ematea besterik ez da. CSS Tricks-ek eskaintzen duen adibideak 10 eskaera diren eta 10Kb gehitzen dituzten 20.5 irudi erakusten ditu. Sprite bakar batean bilduta, hala da 1kb-ko eskaera bat! 9 irudiren joan-etorriko eskaera eta erantzuteko denborak desagertu dira eta datu kopurua% 30 baino gehiago murrizten da. Biderkatu hori zure webguneko bisitari kopuruarekin eta benetan baliabide batzuk moztuko dituzu!

globalnavThe Apple nabigazio barra adibide bikaina da. Botoi bakoitzak egoera batzuk ditu ... orrialdean zaudenean, orrialdetik kanpo zaudenean edo botoiaren gainean mozorrotuta zauden ala ez. CSS-k botoiaren koordenatuak definitzen ditu eta egoera zuzena duen eskualdea aurkezten dio erabiltzaileen arakatzaileari. Egoera horiek guztiak batera bilduta daude grafiko bakarrean, baina eskualdez eskualde bistaratzen dira estilo orrian zehaztutako moduan.

Zure garatzaileek tresnak maite badituzte, badira asko lagun diezazkieketenak, besteak beste Iparrorratza CSS esparrua, Eskaera murriztu ASP.NET-entzat, CSS-Spriter Ruby-rentzat, CSSSprite gidoia Photoshop-entzat, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondue-ren CSS Sprite Generator, Sprite Master Web, eta SpriteMe Bookmarklet.

Capturas de pantalla de Sprite Master Web:
spritemaster webgunea

Martech Zone ez du atzeko planoko irudirik erabiltzen bere gaian zehar, beraz, oraingoz ez dugu teknika hau inplementatu beharrik.

2 Comments

  1. 1

    Itxaron ... ez al da bilduma osoa "irudia" (edo "planoa"), eta azpi-irudi bakoitza (edo irudi azpitaldea animaziozko edo modu interaktiboan aldatzen diren kasuetan) "sprite" bat da?

    Agian, izena aldatu da horrelako gauzak kudeatu nituenetik, baina zin egin nuen Sprite bistaratzen amaitu zen elementua zela, eta ez handik atera zen datu handien taula.

    ("Sprite taula" ... hori ez zen, ezta?)

    • 2

      Baliteke bi gauza desberdin hitz egitea, Mark. CSS-rekin, funtsean, koordenatuak erabiliz bistaratu behar den irudi fitxategiaren "zatia" zehaztu dezakezu. Horrek zure irudi guztiak 'sprite' bakarrean jartzeko aukera ematen dizu eta, ondoren, CSSrekin erakutsi nahi duzun eremua seinalatu besterik ez duzu.

Zer deritzozu?

Gune honek Akismet-ek spam erabiltzen du. Ikasi zure iruzkina nola prozesatu den.