Versnel u werf met CSS Sprites

spritemaster web

Ek skryf nogal baie oor die bladsye op hierdie webwerf, en dit is 'n belangrike deel van die ontleding en verbeterings wat ons aan ons webwerwe maak. 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 meer as 15 jaar oud. CSS was 'n belangrike evolusie in webontwikkeling omdat dit inhoud van ontwerp geskei het. Kyk na hierdie blog en enige ander, en die meerderheid 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. As '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 regtig bronne afskaf!

globalnavDie appel navigasiebalk is 'n uitstekende voorbeeld. Elke knoppie het 'n paar toestande ... of u nou op die bladsy is, nie op die bladsy of oor die knoppie muis 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, SpriteCow, ZeroSprites, Project Fondue se CSS Sprite Generator, Sprite Master Web, En die SpriteMe Bookmarklet.

Screenshot van Sprite Master Web:
spritemaster web

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

2 Comments

  1. 1

    Wag ... is die hele versameling nie 'n 'beeld' (of 'n 'vlak') nie, en elke subbeeld (of 'n subgroep van beelde in die geval van geanimeerde of interaktiewe veranderings) 'n 'sprite'?

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

    (“Sprite tafel” ... was dit nie waar nie?)

    • 2

      Ons praat miskien twee verskillende dinge, Mark. Met CSS kan u basies spesifiseer watter 'gedeelte' van 'n beeldlêer u moet gebruik deur koördinate te gebruik. Hiermee kan u al u beelde in 'n 'sprite' plaas en dan net wys na die area wat u met die CSS wil vertoon.

Wat dink jy?

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