CSS Image Sprites

Notkun sprite-mynda (Image Sprites) í vefsíðugerð

Notendur internetsins gera kröfu um að vefurinn sem þeir heimsækja hlaðist hratt og örugglega. Ein leið til að gera vefinn hraðvirkari er að útbúa svokallaðar sprite myndir. Sprite-myndir eru margar myndir settar saman í eina mynd og CSS (Cascading Style Sheets) útlitskóði svo notaður til að stilla myndina af þannig að réttur bútur af henni birtist á réttum stöðum. Þessi myndatækni er mikið notuð í vefsíðugerð til að fækka fjöldi fyrirspurna (request) til vefþjóns, minnka magn niðurhals (download) og þannig létta vefinn. Sprite tæknin hentar sérstaklega vel fyrir takka á vefsíðum þar sem myndir eru notaðar sem bakgrunnur.

Sprite-myndir fyrir 6 takka, með mús út og mús yfir aðgerðir allir í sömu mynd.

Tökum einfalt dæmi þar sem við viljum láta takka á vefsíðu skipta um útlit þegar músin er dregin yfir takkann. Í þetta verkefni þarf tvær myndir sem birtast í bakgrunn takkans til skiptis eftir því hvort músin er yfir takkanum eða ekki (mouse over - mouse out). Ef vistaðar eru tvær myndir, ein fyrir hvort útlit takkans þá þarf vefskoðarinn að senda tvær fyrirspurnir á vefþjóninn og hlaða niður tveimur myndum.

Mynd1 mús ekki yfir takka – ein fyrirspurn á vefþjón til að hlaða niður 8kb.

Mynd1 mús ekki yfir takka – ein fyrirspurn á vefþjón til að hlaða niður 8kb.

Mynd2 mús yfir takka – ein fyrirspurn á vefþjón til að hlaða niður 8kb.

Mynd2 mús yfir takka – ein fyrirspurn á vefþjón til að hlaða niður 8kb.

Þetta tekur allt sinn tíma og ef mikið er af myndgrafík á vefsíðunni getur tíminn sem tekur að hlaða niður myndunum fyrir síðuna reynt á þolinmæði gestsins.

Ef báðum myndunum er hins vegar skeytt saman þarf aðeins eina fyrirspurn til að hlaða þeim niður og tekur það tölvuna minni tíma.

Báðar myndir saman í einni sprite-mynd - ein fyrirspurn á vefþjón til að hlaða niður 12kb.

Báðar myndir saman í einni sprite-mynd - ein fyrirspurn á vefþjón til að hlaða niður 12kb.

Gott dæmi um sprite-mynd eru smámyndir á tökkum Facebook. Þar eru yfir 60 myndir allar upprunar úr einni sprite-mynd sem er aðeins 14kb og er sótt með einni fyrirspurn á vefþjón.
Smelltu hér til að skoða Facebook sprite-myndina.

Hér fyrir neðan má sjá einfalda útfærslu á veftakka þar sem CSS og sprite-mynd eru notuð.

Útbúin er ein mynd sem inniheldur báðar mynd útgáfur takkans, mús úti og mús yfir. Mikilvægt er að stilla myndirnar vel af og vita pixlastöðu þeirra innan myndflatarins, það auðveldar vinnuna við CSS kóðann síðar.

Sprite-mynd sem inniheldur báða myndmöguleika takkans.

Sprite-mynd sem inniheldur báða myndmöguleika takkans.

Hér er mjög einfaldur HTML kóði með tilbúnu svæði fyrir takka. Notað er unordered list-tag (<ul>) með auðkennið (id) "buttons".
Lína (<li>) í listanum hefur svo auðkenni takkans, hér "return".

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <ul id="buttons">
            <li id="return"><a href="#"></a></li>
        </ul>
    </body>
</html>

CSS kóða er svo bætt við inn í head-tagið (<head>) eða vefskjalið tengt við CSS skjal (external style).
Hér er notast við CSS kóða inn í head:

<!DOCTYPE html>
<html>
    <head>
        <style>
           #buttons{position:relative;}
           #buttons li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
           #buttons li, #buttons a{height:48px;display:block;}
           #return{left:0px;width:48px;}
           #return {background:url('images/takkar.png') 0 0;}
           #return a:hover{background: url('images/takkar.png') -51px 0;}
        </style>
    </head>
    <body>
        <ul id="buttons">
            <li id="return"><a href="#"></a></li>
        </ul>
    </body>
</html>

Árangurinn er takki sem notar eina mynd en hefur tvö útlit. Myndin sem birtist í bakgrunninn er eingöngu færð til með CSS skipun þannig að vinstri hluti hennar sést þegar músin er ekki yfir og hægri hlutinn sést þegar músin er yfir.

Takkinn þegar músin er ekki yfir honum.

Takkinn þegar músin er yfir honum.

Takkinn þegar músin er yfir honum.

Heimildir

Siggi og Anton (spjall) 26. janúar 2014 kl. 01:32 (UTC)