Versnel u werf met CSS Sprites

spritemaster web

Ek skryf 'n redelike aantal bladsye op hierdie webwerf en dit is 'n belangrike deel van die ontleding en verbeterings wat ons aan ons kliënte se webwerwe aanbring. Afgesien van die verhuising na kragtige bedieners en die gebruik van instrumente soos Inhoudsleweringsnetwerke, is daar 'n aantal ander programmeringstegnieke wat die gemiddelde webontwikkelaar kan gebruik.

Die standaard vir die oorspronklike Cascading Style Sheet is nou ouer as 15 jaar. CSS was 'n belangrike evolusie in webontwikkeling omdat dit inhoud van ontwerp geskei het. Kyk na hierdie blog en enige ander, en die meeste van die stylverskil is eenvoudig in die aangehegte stylblad. Stylvelle is ook belangrik omdat dit plaaslik in 'n kas in u blaaier gestoor word. As gevolg hiervan, as mense steeds u webwerf besoek, laai hulle nie elke keer 'n stylblad af nie ... net die inhoud van die bladsy.

Een element van CSS wat dikwels onderbenut word, is CSS Sprites. Wanneer 'n gebruiker u webwerf besoek, besef u miskien nie dat hulle nie net een versoek vir die bladsy rig nie. Hulle doen verskeie versoeke... 'n versoek vir die bladsy, vir enige stylblaaie, vir aangehegte JavaScript-lêers, en dan vir elke prent. As u 'n tema het met 'n reeks beelde vir grense, navigasiebalkies, agtergronde, knoppies, ens., Moet die blaaier elkeen een vir een van u webbediener aanvra. Vermenigvuldig dit met duisende besoekers en dit kan tienduisende versoeke aan u bediener rig!

Dit vertraag weer u werf. A stadige webwerf kan 'n dramatiese invloed hê op die betrokkenheid en omskakelings wat u gehoor maak. 'N Strategie wat groot webontwikkelaars gebruik, is om al die beelde in een lêer te plaas ... genaamd a sprite. In plaas daarvan om 'n versoek vir elkeen van u lêerbeelde in te dien, hoef daar slegs 'n enkele versoek vir die enkele sprite-beeld te wees!

Jy kan lees oor hoe CSS Sprites by CSS-Tricks werk or Smashing Magazine se CSS Sprite Post. My punt is nie om u te wys hoe u dit moet gebruik nie, maar net om u te adviseer om te verseker dat u ontwikkelingspan dit op die webwerf insluit. Die voorbeeld wat CSS Tricks bied, toon 10 beelde wat 10 versoeke is en tot 20.5 KB. As dit in 'n enkele sprite versamel word, is dit 1 versoek, dit is 13 kb! Die retoerversoek en responstye vir 9 beelde is nou weg en die hoeveelheid data word met meer as 30% verminder. Vermenigvuldig dit met die aantal besoekers op u webwerf, en u sal 'n paar bronne regtig afskud!

globale navigasieDie appel navigasiebalk is 'n uitstekende voorbeeld. Elke knoppie het 'n paar toestande ... of u nou op die bladsy is, nie van die bladsy af of as u oor die knoppie is nie. CSS definieer die koördinate van die knoppie en bied die streek van die regte toestand aan die gebruikersblaaier. Al hierdie toestande is saamgevoeg in 'n enkele afbeelding - maar word streek vir streek vertoon soos in die stylblad gespesifiseer.

As u ontwikkelaars van gereedskap hou, is daar baie wat u kan help, insluitend die Kompas CSS raamwerk, Versoek Verminder vir ASP.NET, CSS-Spriter vir Ruby, CSSSprite-skrif vir Photoshop, SpritePad, SpriteRight, SpriteKoei, ZeroSprites, Project Fondue se CSS Sprite Generator, Sprite Meester Web, En die SpriteMe Boekmerk.

Screenshot van Sprite Meester Web:
spritemaster web

Martech Zone gebruik nie agtergrondbeelde in die tema nie, en ons hoef hierdie tegniek nie tans te gebruik nie.

2 Comments

  1. 1

    Wag ... is die hele versameling nie 'n "beeld" (of 'n "vliegtuig"), en elke sub-beeld (of sub-groep beelde in die geval van geanimeerde of interaktief veranderende) 'n "sprite"?

    Miskien is goed hernoem sedert ek laas hierdie soort ding hanteer het, maar ek kon sweer die Sprite was die element wat uiteindelik vertoon is, nie die groot datatabel waaruit dit getrek is nie.

    ("Sprite-tafel" ... dit was dit nie?)

    • 2

      Ons praat dalk twee verskillende dinge, Mark. Met CSS kan jy basies spesifiseer watter 'gedeelte' van 'n beeldlêer om te vertoon met behulp van koördinate. Dit laat jou toe om al jou beelde in 'n enkele 'sprite' te plaas en dan net na die area te wys wat jy met die CSS wil vertoon.

Wat dink jy?

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.