Sprite-urile CSS reprezinta o metoda de a reduce numarul de cereri HTTP facute pentru resursele de imagini referite in site-ul tau. Imaginile sunt combinate intr-o singura imagine cu valori X si Y definite. Utilizand proprietatea CSS background-position imaginile ce o compun sunt atribuite elementelor relevante ale paginii.
Aceasta tehnica poate fi foarte eficienta in perfomanta site-ului, in mod special cand imagini mici, precum icoanele din meniuri, sunt utilizate. Spre exemplu, pagina de start Yahoo!, utilizeaza aceasta tehnica tocmai cu acest scop.
Probleme
Exista cateva probleme de afisare in browser ce trebuie luate in considerare atunci cand utilizezi un sprite CSS.
Opera
Opera (cel putin pana in versiunea 9.0) nu va recunoaste o pozitie a fundalului mai mare de 2042px sau mai mica de -2042px, utilizand, implicit, aceasta valoare. Unealta va lua in considerare aceasta problema si va crea o noua coloana in imaginea generata de fiecare data cand limita verticala este atinsa.
Safari
Safari are o problema cu imaginile de fundal repetate.. Din fericire, aceasta problema poate fi foarte simplu rezolvata specificand o valoarea destul de mare a marginii orizontale (configurabila).
De citit
A List Apart a publicat un articol intitulat Sprite-uri CSS: Sarutul mortii in taierea imaginilor care explica conceptul ce sta la baza sprite-urilor CSS. Daca utilizezi pentru prima data aceasta tehnica, iti recomandam sa arunci o privire pe A List Apart.