A weblapunk felgyorsításának lehetőségeit tárgyaló sorozatunk a harmadik részéhez érkezett. Ebben a cikkben az ún. CSS Sprite eljárásról lesz szó, az alkalmazásával kisebb részben a kliens által letöltendő adatmennyiséget, nagyobb részben a szerver felé intézett kérések számát csökkenthetjük. A megtakarítás több mint jelentős lehet, és ez az eljárás a böngészők oldaláról is a széles körben támogatott megoldások közé tartozik.
Mik is az a CSS Sprite?
A CSS Sprite eljárás lényege, hogy a weblapunkon felhasznált képeket egyetlen nagy képpé egyesítjük, és a stíluslapon (CSS) határozzuk meg, hogy az egyesített képnek épp mely részletét jelenítjük meg egy adott helyen. Ez természetesen sokkal egyszerűbb, mint amilyennek elsőre hangozhat. A trükk lényege, hogy egy HTML elemhez CSS-ben meghatározhatjuk a méretét, és hogy a háttérképe milyen eltolással jelenjen meg.
Nézzük egy konkrét példán keresztül, hogy miről is van szó. Legyen a lapunkon mondjuk 4 kisebb-nagyobb képünk. Amikor a lapunkat a böngészőben meg akarjuk jeleníteni, akkor a képek letöltéséhez a böngészőnek 4 kérést kell intéznie a webszerver felé, és a webszervernek 4 kérést kell kiszolgálnia.
Az eredeti HTML forrás
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Példa</title>
</head>
<body>
<p>
<img src="fb.png" alt="Facebook"/>
<img src="tw.png" alt="Twitter"/>
<img src="gp.png" alt="Google+"/>
<img src="pi.png" alt="Pinterest"/>
</p>
</body>
</html>
A CSS Sprite trükkel lehetőségünk van rá, hogy a szerver felé intézett kérések számát csökkentsük. A trükk nagyon egyszerű. A fenti példánál maradva, vegyük a 4 kis képünket, és egy nagyobb képben egyesítsük ezeket. Ha a képek palettái nem térnek el jelentősen, akkor a nagyobb képünk mérete kisebb lehet, mint a 4 kis képünk méretének összege lenne. A lényeg azonban nem ez.
Vegyünk ezután egy transzparens, azaz teljesen átlátszó képet, akár 1×1 pixel méretben (a példában transp.png). Az eredeti képet helyettesítsük be ezzel a képpel a HTML forrásban, és állítsunk be egy osztályt (class) hozzá. A stíluslapunkon (CSS) határozzuk meg a megadott osztályban a kis képünk méretét és az összefűzött képen elfoglalt pozícióját.
A CSS Sprite megoldás HTML forrása
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Példa</title>
<style type="text/css">
.spfb {width:32px;height:32px;background: url(sprite.png) 0 0}
.sptw {width:32px;height:32px;background: url(sprite.png) -32px 0}
.spgp {width:32px;height:32px;background: url(sprite.png) 0 -32px}
.sppi {width:32px;height:32px;background: url(sprite.png) -32px -32px}
</style>
</head>
<body>
<p>
<img src="transp.png" alt="Facebook" class="spfb"/>
<img src="transp.png" alt="Twitter" class="sptw"/>
<img src="transp.png" alt="Google+" class="spgp"/>
<img src="transp.png" alt="Pinterest" class="sppi"/>
</p>
</body>
</html>
A transzparens kép és a CSS-ben meghatározott háttérkép beállításával elértük, hogy az eredeti kis képünk helyén az összefűzött, nagy képünk általunk meghatározott részlete jelenjen meg. A szervernek pedig nem 4, hanem csupán 2 kérést kellett kiszolgálnia, miközben a megjelenített tartalom nem változott.
A fenti példában csak 4 képet említettem, de dolgozhatunk akár 40 vagy 100 kép összevonásával is, ahol még látványosabb lehet a megtakarítás.
Természetesen az egyesített képeknek nem kell méretben egyezniük, több weblapnál is láthattok példát arra, hogy akár a weblap összes képi elemét egyetlen nagy képben egyesítve, CSS Sprite megoldással szolgálják ki.
Az eljárás alkalmazása esetén a megtakarítás az összevont képi elemek számával egyenes arányban nő!