Zure webgunea bizkortzea CSS Sprites-ekin

spritemaster webgunea

Orrialdeen abiadurari buruz dezente idazten dut gune honetan eta gure bezeroen guneetan egiten ditugun analisien 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 ... orriaren edukia baizik.

Askotan gutxi erabiltzen den CSSren elementu bat da CSS Spriteak. 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 adibidean 10 eskaera diren eta 10 KB-ra gehitzen diren 20.5 irudi erakusten dira. Sprite bakar batean bilduta, hala da 1kb-ko eskaera bat! 9 irudiren joan-etorriko eskaera eta erantzuteko denborak desagertu dira eta datuen 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 kokatzen duzun ala ez. CSS botoiaren koordenatuak definitzen ditu eta egoera zuzena duen eskualdea aurkezten dio erabiltzaileen arakatzaileari. Egoera horiek guztiak bilduta daude grafiko bakarrean, baina estilo eskualdean zehazten den moduan eskualde eskualde bistaratzen dira.

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, SpriteEskuin, 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.