Biztosan sokan találkoztatok már a CSS sprites kifejezéssel. Ha valaki mégsem ismerné íme egy rövid összefoglaló róla.

A weboldalak főként a design miatt, nagyon sok kis apró képet töltenek le. Minden egyes kép letöltése 1-1 request, ami sok kép esetén nagy mértékben lassítja az oldal letöltését. Ezért célszerű lenne a sok kis kép helyett egy nagyon használni, amibe szerepel az összes kicsi. Az alábbi példán keresztül láthatjuk hogyan tudjuk ezt megtenni egyszerűen.

Egy felsorolásba megjelenítjük egy pár letölthető fájlt. Minden egyes elem élé oda szeretnénk tenni egy ikont a kiterjesztése alapján. Ehhez szükséges minden egyes kiterjesztéshez egy kép. Ha sok elemből áll a lista, akkor ez akár 10-15 request többletet is generálhat csak azért, hogy a kiterjesztések alapján a böngésző megjelenítse a képeket.
Mennyivel egyszerűbb lenne, ha egy nagy képünk lenne, amiben szerepel az összes kiterjesztéshez tartozó kép, és mindig csak a kép megfelelő részét jelenítenénk meg. Ekkor csak egy képet kellene letölteni, amit egyszerű kliens oldalon cacheelni és a CSS-ből csak azt kell beállítani, hogy a kép mely része látszódjon, amit a például így tehetünk meg:

CSS

ul.icons li
{
  padding-left: 20px;
  list-style: none;
  background-image:url(/Images/nagykep.png);
  background-color:transparent;
  background-repeat:no-repeat;    
}

li.gif {
   height:16px;background-position:-66px 0; 
}

li.jpg { 
   height:16px;background-position:-98px 0; 
}

HTML

<ul class="icons">
    <li class="gif">kép.gif</li>
    <li class="jpg">másikkép.jpg</li>
</ul>

Ebben az szerepel hogy minden li-nek ami az icons osztállyal ellátott ul-ben szerepel a háttérképe a generált nagy kép. A második bejegyzés a CSS-ben pedig azt mondja meg, hogy az li hátterében a 98,0 pozíciótól kell megjeleniteni 16 pixel magasan, mivel a gif osztály van beállítva. Fontos, hogy ilyen esetben, ahol nem csak a képet jelenítjük meg, a generált nagy képben egy oszlopban szerepeljenek a képek, mert így csak a magassággal kell játszani.

A probléma ezzel csak annyi, hogy nehéz összerakni a sok kis képet, és kiszámolni, hogy ezek pontosan hol kezdődnek és mekkora a méretük. Ehhez nyújt nagy segítséget a http://css-sprit.es/ vagy a http://spritegen.website-performance.org/ oldal. Ennek segítségével kiválasztjuk mely képeket szeretnénk összegyúrni és ez alapján legenerálja a nagy képet és minden kis képhez a CSS osztályt ami megadja a pozíciót, amit csak át kell emelnünk a saját CSS osztályunkba.