CSS sprite

Sokáig tanakodtam, hogy elővegyem-e ezt a témát, mert sokan sokféleképp közelítették meg. Van aki úgy gondolja, hogy áldás, van aki egyenesen elveti a használatát mert bonyolult (szerintem nem az), de abban mindenesetre egyet értünk, hogy az egyre jobban leterhelt webszerverekkel valamit tenni kell. Ma már fontos, hogy oldalainkat optimalizáljuk (Nézd meg hány pontot kapsz az oldaladra), vagy legalábbis kísérletet tegyünk rá. A CSS sprite erre ad egy igen érdekes lehetőséget, ami talán mindenki számára, de főként a kis képek tömkelegéből álló weblapoknál bizony rettentően hasznos lehet.

Olvastam statisztikákat – amolyan “weboldal-celeb” előtte utána stílusban – és nagyjából a ténylegesen nagy forgalmú oldalak esetén olyan 10-12%-ot javult a teljesítmény a bevezetése után. Elgondolkodtató. Azért már most figyelmeztetek mindenkit, hogy csodaszerek természetesen nincsenek! No lássuk ezt a nem csodaszernek számító Sprite-ot.

Mi az a CSS sprite ?

Gyakorlatilag nem más, mint egy képállomány, amire az összes képünket rápakoljuk és a CSS kód segítségével kiválasztjuk, hogy melyiket akarjuk megjeleníteni. És itt is van a legnagyobb előnye, hiszen így egyetlen kép letöltésével, a weboldal szinte összes grafikai elemét letöltjük az esetenként 30-40 apró kép helyett. Ráadásul bármelyik aloldalt nyitjuk meg, a grafikai elemeket nem kell újra letöltenünk, ezzel csökken a szerver terhelése és gyorsabbá, gördülékenyebbé válik az oldal böngészése.

Hogyan rakjunk össze egy ilyen képfájlt?

Van rá sok lehetőségünk,:

  1. Képszerkesztő programmal feldobáljuk a kiválasztott képeinket egy nagyot létrehozva, ilyenkor arra ügyeljünk, hogy a kis képek megfelelő háttérrel és elkülönülten legyenek (megfelelő méretű területet hagyva köztük), hogy később könnyen lehessen vele dolgozni (a példaképen én nem hagytam, de tényleg csak azért, mert abszolút egyszerű).

A példában használt nagyon egyszerű képem így néz ki:

CSS sprite példa kép

CSS Sprite példa kép

  1. Webes alkalmazások segítségével, (rengeteg van belőle) én ezt ajánlom: http://csssprites.com/

Vagy egy másik kiváló oldal: http://www.spritebox.net/


CSS feldolgozás

A kép maga használhatatlan volna a CSS nélkül, minden esetben mikor az egyik képre szükségünk van, a CSS segítségével definiáljuk, hogy mit szeretnénk megjeleníteni. Nézzük milyen lépésekből is áll ez a folyamat:

  1. Minden esetben érdemes elsőként a background-ot definiálni, azaz magát a sprite-ot.
background-image: url("sprite.jpg");
  1. Ezek után a background-position-nal kiválasztjuk a sok kép közül, hogy melyiket használjuk. Az első szám jelenti az x pozíciót (kép bal oldalától mért távolság), míg a második szám az y pozíció (felülről hány pixel).
#egy{background-position: 0px 0px;}

Ezzel gyakorlatilag meg is vagyunk. Persze ez a módszer csak szabályos alakzatokra alkalmazható, no de akkor mi van a szabálytalanokkal?? Természetesen arra is van megoldás, de ezt egy következő cikkben nézzük majd meg.
Lássunk akkor egy konkrét példát a CSS sprite használatára.

<!DOCTYPE html>
 <html>

<head>
 <title>CSS Sprite példa</title>
 <style type="text/css">
 #teszt li{
 background-image: url("sprite.jpg");
 float: left;
 width: 100px;
 height: 100px;
 list-style:none;
 }
 #egy{background-position: 0px 0px;}
 #ketto{background-position: 0px -100px;}
 #harom{background-position: -100px 0px;}
 #negy{background-position: -100px -100px;}
 </style>
 </head>

<body>
 <ul id="teszt">
 <li id="egy"></li>
 <li id="ketto"></li>
 <li id="harom"></li>
 <li id="negy"></li>
 </ul>
 </body>
 </html>

A példa itt elérhető.

Forrás:

http://www.w3.org/TR/css3-background/

http://dev.w3.org/csswg/css3-images/#url

Creative Commons Licenc
CSS sprite  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...