Összevont képek használata

A felhasználói élmény javítása, a weboldalunk betöltési sebességének csökkentésének az egyik lehetősége, ha több kép, ikon helyett egy összevont képet használunk, az ún. image sprite, css sprite megoldások.

Gyakolatilag egy nagy méretű képre helyezzük az összes ikont képet a weboldalunkról, amelyet ezzel a technológiával majd meg tudunk jeleníteni. Így egy akár 50-100 kép letöltése helyett egyszer kell a felhasználónak a sprite képet letöltenie, majd ennek kis részleteit jelenítjük meg a design részeként.

W3Schools oldalán pár egyszerűbb példán keresztül megismerhetjük a css sprite technikát.

Példa a css sprite használatára

Például adott a jobb oldalon látható sprite image. Erre helyeztük el a home és a navigációs ikonkat. A 3 kép letöltése helyett, csak ezt az egyet kell letölteni az oldal megtekintésekor.

Ha csak a Home ikont akarjuk megmutatni, így használhatjuk:

img.home
 {
 width:46px;
 height:44px;
 background:url(img_navsprites.gif) 0 0;
 }

Tehát háttérképként hasznájuk a image sprite-ot, a kép 0,0 pozíciójától kezdődően jelenítjünk meg egy 46×44 méretű képet.

Lássuk a balra mutató nyíl képrászlet megadását is:

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

Tehát a különbség annyi, hogy vízszintesen a  -47px, felülről 0px pozíciótól kezdődően akarjuk a kép 63×43 méretű részletét megjeleníteni.

Sok kép estén jelentős betöltési sebesség csökkenést érhetünk el ennek a technológiának a használatával. Ezen keresztül keresőoptimalizálási szempontból is javítunk az oldalunkon, mert a google figyelembe veszi az oldalunk sebességét.

A oldalhoz fel lett használva a következő oldal: http://www.w3schools.com/css/css_image_sprites.asp