Tħaffef is-Sit Tiegħek bis-CSS Sprites

web spritemaster

Nikteb dwar il-veloċità tal-paġna pjuttost ftit fuq dan is-sit u hija parti importanti mill-analiżi u t-titjib li nagħmlu fis-siti tal-klijenti tagħna. Apparti milli tmur għal servers qawwija u tuża għodod bħal Netwerks għall-Kunsinna tal-Kontenut, hemm numru ta 'tekniki ta' programmazzjoni oħra li l-iżviluppatur medju tal-web jista 'juża.

L-istandard għall-Karta tal-Istil Cascading oriġinali issa ilu aktar minn 15-il sena. CSS kienet evoluzzjoni importanti fl-iżvilupp tal-web minħabba li kienet tissepara l-kontenut mid-disinn. Ħares lejn dan il-blog u kwalunkwe ieħor u l-maġġoranza tad-differenza fil-grafika hija sempliċement fl-iskeda tal-istil mehmuża. Stylesheets huma importanti wkoll għax huma maħżuna lokalment f'cache fil-browser tiegħek. Bħala riżultat, hekk kif in-nies ikomplu jżuru s-sit tiegħek, mhux qed iniżżlu folja tal-istil kull darba ... biss il-kontenut tal-paġna.

Element wieħed ta 'CSS li ħafna drabi huwa sottoutilizzat huwa Sprites CSS. Meta utent iżur il-websajt tiegħek, tista 'ma tirrealizzax li mhux sempliċement qed jagħmlu talba waħda għall-paġna. Huma tagħmel talbiet multipli... talba għall-paġna, għal kwalunkwe folja ta 'stil, għal kwalunkwe fajl JavaScript mehmuż, u mbagħad għal kull immaġini. Jekk għandek tema li għandha serje ta 'immaġini għall-fruntieri, bars tan-navigazzjoni, sfondi, buttuni, eċċ ... il-browser irid jitlob kull waħda, waħda waħda mill-web server tiegħek. Immoltiplika dak b'eluf ta 'viżitaturi u li jistgħu jkunu għexieren ta' eluf ta 'talbiet magħmula lis-server tiegħek!

Dan, imbagħad, inaqqas is-sit tiegħek. A sit bil-mod jista 'jkollu impatt drammatiku fuq l-ingaġġ u l-konverżjonijiet li tagħmel l-udjenza tiegħek. Strateġija li jużaw żviluppaturi tal-web kbar hija li tqiegħed l-immaġini kollha f'fajl wieħed ... imsejjaħ a Sprite. Pjuttost milli tagħmel talba għal kull waħda mill-immaġini tal-fajl tiegħek, issa hemm bżonn biss li jkun hemm talba waħda għall-immaġni sprite waħda!

Tista 'taqra dwar kif jaħdmu CSS Sprites f'CSS-Tricks or CSS Sprite ta 'Smashing Magazine post. Il-punt tiegħi mhuwiex li nurik kif tużahom, sempliċement biex nagħtik parir biex tiżgura li t-tim tal-iżvilupp tiegħek jinkorporahom fis-sit. L-eżempju li jipprovdi CSS Tricks juri 10 immaġini li huma 10 talbiet u jammontaw għal 20.5Kb. Meta miġbura fi sprite wieħed, huwa Talba waħda li hija 1kb! It-talba għal-vjaġġ bir-ritorn u l-ħinijiet ta 'rispons għal 9 immaġini issa spiċċaw u l-ammont ta' dejta jitnaqqas b'aktar minn 30%. Immoltiplika dak bin-numru ta 'viżitaturi fuq is-sit tiegħek u int verament tqaxxar xi riżorsi!

globalnavil Apple navigazzjoni bar huwa eżempju tajjeb. Kull buttuna għandha ftit stati ... kemm jekk int fuq il-paġna, barra mill-paġna, jew jekk toqgħodx fuq il-buttuna. CSS jiddefinixxi l-koordinati tal-buttuna u jippreżenta r-reġjun tal-istat korrett lill-browser tal-utenti. Dawn l-istati kollha huma mġarrbin flimkien fi grafika waħda - iżda murija reġjun b'reġjun kif speċifikat fil-folja tal-istil.

Jekk l - iżviluppaturi tiegħek iħobbu l - għodda, hemm ton hemmhekk li jistgħu jgħinuhom, inkluż il - Qafas tal-kumpass CSS, Talba Tnaqqas għal ASP.NET, CSS-Spriter għal Ruby, Skritt CSSSprite għal Photoshop, SpritePad, SpriteDritt, SpriteCow, ZeroSprites, CSS Sprite Generator tal-Fondue tal-Proġett, Sprite Master Web, U l- SpriteMe Bookmarklet.

Screenshot ta ' Sprite Master Web:
web spritemaster

Martech Zone ma jużax immaġini fl-isfond fit-tema kollha tiegħu, allura m’għandniex għalfejn niskjeraw din it-teknika f’dan iż-żmien.

2 Kummenti

  1. 1

    Stenna... il-kollezzjoni kollha mhix “immaġini” (jew “pjan”), u kull sub-immaġni (jew sottogrupp ta’ immaġini fil-każ ta’ dawk animati jew li jinbidlu b’mod interattiv) “sprite”?

    Forsi l-għalf ingħata isem ġdid mill-aħħar darba li ħadt din it-tip ta 'ħaġa imma stajt naħlef li l-Sprite kien l-element li spiċċa jintwera, mhux it-tabella tad-dejta kbira li nġibdet minnha.

    ("Mejda Sprite"... ma kienx hekk?)

    • 2

      Forsi nkunu qed nitkellmu żewġ affarijiet differenti, Mark. B'CSS, tista' bażikament tispeċifika liema "porzjon" ta' fajl ta' l-immaġni trid turi l-koordinati li jutilizzaw. Dan jippermettilek li tpoġġi l-immaġini kollha tiegħek fi 'sprite' wieħed u mbagħad tipponta biss lejn iż-żona li tixtieq turi bis-CSS.

What do you think?

Dan is-sit juża Akismet biex inaqqas l-ispam. Tgħallem kif il-kumment tiegħek huwa pproċessat.