Performance siti web - Ottimizzazione delle immagini - CSS Image Sprites

Performance siti web - Ottimizzazione delle immagini - CSS Image Sprites

1) accorpare più immagini singole in una utilizzando la regola del CSS Image Sprites.

Motivo: Per ogni immagini il Browser effettua una request, accorpandole in una sola, si ha una sola request e aumenta la performance.



1 immagine = 1 request

10 immagini = 10 request

le singole immagini vengono recuperate tramite la mappatura dei pixel.

Esempio utilizzando una immagine raggruppata:
home{background:url('img_navsprites.gif') 0 0;}

 - Definisce il background image e la posizione (left 0px, top 0px)


prev{background:url('img_navsprites.gif') -47px 0;}

- Definisce il background image 47px a destra