CSS sprites je technika, při které se do jednoho obrázku naskládá několik malých obrázků. Při vykreslování na stránce se pak použije CSS pozicování, které z ono velkého obrázku ukáže jen příslušnou část „podobrázku“.
Nejčastěji se takto slučují všelijaké malé ikonky, tlačítka, …
Výhoda této techniky je, že se stahuje pouze jeden soubor pro třeba 10 malých obrázků, což urychluje zobrazení stránky.
Příklad zde – CSS sprites example
Klasické vložení obrázku:
[html]<img src="./en.gif"/>[/html]
Použití CSS sprites:
[html]<div class="en"/></div>[/html]
příslušné CSS (pro každý obrázek je třeba znát jeho rozměry a prostorové umístění ve „velkém“ obrázku):
[css]
div.en {
width: 20px;
height: 12px;
background-repeat: no-repeat;
background-image: url(sprites.png);
background-position: 0px 0px;
}[/css]
Zajímavé odkazy:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Date Display Technique with Sprites