Pagpadali sa Imong Site gamit ang CSS Sprites

spritemaster web

Gisulat ko ang bahin sa tulin nga panid sa gamay sa kini nga site ug kini usa ka hinungdanon nga bahin sa pagtuki ug mga pagpaayo nga among gihimo sa mga site sa among mga kliyente. Gawas sa pagbalhin sa gamhanan nga mga server ug paggamit mga himan sama sa Mga Network sa Paghatud sa Sulud, adunay usa ka ihap sa uban pang mga pamaagi sa programa nga mahimo gamiton ang kasagaran nga web developer.

Ang sukaranan alang sa orihinal nga Cascading Style Sheet sobra na sa 15 ang edad karon. Ang CSS usa ka hinungdanon nga ebolusyon sa pag-uswag sa web tungod kay gilain niini ang sulud gikan sa laraw. Tan-awa ang kini nga blog ug bisan unsang uban pa ug ang kadaghanan sa pagkalainlain sa istilo naa ra sa gilakip nga styleheet. Hinungdanon usab ang mga istilo sa istilo tungod kay kini gitago sa lokal sa usa ka cache sulod sa imong browser. Ingon usa ka sangputanan, samtang ang mga tawo nagpadayon sa pagbisita sa imong site, wala sila nag-download sa usa ka style sheet sa matag higayon… ang sulud ra sa panid.

Usa ka elemento sa CSS nga kanunay wala gigamit Mga CSS Sprite. Kung ang usa ka gumagamit mobisita sa imong website, mahimo nimo nga dili mahibal-an nga dili sila yano nga paghimo bisan usa ka hangyo alang sa panid. Sila paghimo daghang mga hangyo… Usa ka hangyo alang sa panid, alang sa bisan unsang mga style sheet, alang sa bisan unsang gilakip nga mga JavaScript file, ug pagkahuman sa matag imahe. Kung adunay ka usa ka tema nga adunay usa ka serye sa mga imahe alang sa mga utlanan, mga bar sa nabigasyon, background, buton, ug uban pa… kinahanglan nga maghangyo ang browser matag usa, matag usa gikan sa imong web server. I-multiply kana sa libu-libong mga bisita ug kana mahimo nga napulo ka libo nga mga hangyo nga gihimo sa imong server!

Kini, sa baylo, makapahinay sa imong site. A ang hinay nga site mahimong adunay usa ka dramatik nga epekto sa pakig-uban ug mga pagkakabig nga gihimo sa imong mamiminaw. Ang usa ka estratehiya nga gigamit sa maayo nga mga developer sa web mao ang pagbutang sa tanan nga mga imahe sa usa ka file… nga gitawag nga a sprite. Kaysa maghimo usa ka hangyo alang sa matag usa sa imong mga imahe sa file, karon kinahanglan ra adunay usa ka paghangyo alang sa nag-usa nga imahe nga sprite!

Mahimo nimo mabasa giunsa ang pagtrabaho sa CSS Sprites sa CSS-Tricks or Ang Smashing Magazine nga CSS Sprite post Ang akong punto dili aron ipakita kanimo kung giunsa kini gamiton, aron lang tambagan ka nga masiguro nga ang imong koponan sa pagpauswag giapil sila sa site. Ang pananglitan nga gihatag sa CSS Tricks nagpakita sa 10 nga mga imahe nga 10 nga mga hangyo ug dugangan hangtod sa 20.5Kb. Kung gitigum sa usa ka sprite, kini 1 hangyo nga 13kb! Wala na ang gihangyo nga pagbiyahe ug mga oras sa pagtubag alang sa 9 nga mga imahe ug ang kantidad sa datos nga nabawasan labi pa sa 30%. Padaghan kana sa gidaghanon sa mga bisita sa imong site ug mag-ahit gyud ka sa pipila nga mga gigikanan!

globalnavang Apple usa ka maayong panig-ingnan ang nabigasyon nga bar. Ang matag buton adunay pipila nga estado… kung naa ka sa panid, wala sa panid, o mousing sa buton. Gihubit sa CSS ang mga koordinasyon sa buton ug gipresentar ang rehiyon sa tama nga estado sa browser sa mga mogamit. Ang tanan nga kini nga mga estado nahugno nga magkahiusa sa usa ka graphic - apan gipakita nga rehiyon matag rehiyon ingon sa gipiho sa style sheet.

Kung gusto sa imong mga developer ang mga gamit, adunay daghang tonelada nga makatabang kanila, lakip ang Balangkas sa Compass CSS, PagpangayoReduce alang sa ASP.NET, CSS-Spriter alang kang Ruby, Script sa CSSSprite alang sa Photoshop, SpritePad, SpriteTungod, SpriteCow, Mga ZeroSprite, Ang CSS Sprite Generator sa Project Fondue, Sprite Master Web, ug ang SpriteMe Booklet.

Screenshot sa Sprite Master Web:
spritemaster web

Martech Zone wala magamit ang panagway sa background sa tibuuk nga tema niini, busa dili namon kinahanglan nga ipahamtang kini nga pamaagi sa kini nga oras.

2 Comments

  1. 1

    Paghulat… dili ba ang tibuuk nga koleksyon usa ka “imahe” (o usa ka “eroplano”), ug ang matag sub-imahe (o sub-grupo nga mga imahe sa kaso sa mga animated o interactive nga nagbag-o) usa ka “sprite”?

    Tingali ang mga butang gipangalan na usab sukad sa katapusan nga higayon nga akong gidumala kini nga klase nga butang apan nakapanumpa ako nga ang Sprite mao ang elemento nga sa katapusan gipakita, dili ang dako nga lamesa sa datos nga nakuha gikan niini.

    ("Sprite table"… dili ba?)

    • 2

      Tingali nagsulti kita duha nga magkalainlain nga mga butang, Marcos. Sa CSS, mahimo nimo nga matino kung unsang 'bahin' sa usa ka file sa imahe ang ipakita nga gigamit ang mga koordinasyon. Gitugotan ka nga ibutang ang tanan nimo nga mga imahen sa us aka 'sprite' ug pagkahuman itudlo ra ang lugar nga gusto nimo ipakita uban ang CSS.

Unsay imong hunahuna?

Kini nga site naggamit sa Akismet sa pagpakunhod sa spam. Hibal-i kon giunsa ang pagproseso sa datos sa imong komento.