Optimizare site cu image sprite (css sprite)

Articol de Daniel Toader. Google

Imaginile de tip sprite (Image Sprite) sunt cunoscute si sub denumirea de CSS Sprite. Un Sprite este un fisier bitmap ce contine diverse elemente grafice, de obicei toate, pentru designul unei pagini web. Folosind proprietatile css de pozitionare, latime si inaltime putem afisa o singura imagine ca fundal mapand-ul exact pe pozitia unde se afla imaginea dorita in cadrul sprite-ului. Majoritatea site-urilor cu un trafic foarte mare folosesc aceasta varianta pentru a micsora numarul de cereri HTTP.

Altfel spus, un sprite este de fapt o colectie de imagini de dimensiuni mici, incarcate intr-o singura imagine. Se mai numeste si „harta de imagini” si se foloseste pentru a scadea numarul de request-uri facute catre server, optimizand astfel incarcarea site-ului, si totodata reducand latimea de banda consumata. Utilizarea imaginilor de tip sprite a fost data ca alternativa si pentru optimizarea imaginilor pentru web.

Exemplu de image sprite:

Social Network Image Sprite
Social Network Image Sprite

Ce poate fi inclus intr-un image sprite?

Unul dintre avantajele folosirii imaginilor de tip sprite este ca pot fi adaugate imagini de diferite dimensiuni, culori, forme si complexitati. De obicei se recomanda crearea unei singure imagini de tip sprite care sa contina toate imaginile statice folosite de obicei in designul site-ului.

Cum se creaza un image sprite?

De obicei se recomanda folosirea unui tip de imagine care permite transparenta (ex: png sau gif), asta nu inseamna ca nu poti salva un image sprite ca jpg, insa conteaza foarte mult unde vei folosi imaginile si daca ai nevoie de transparenta sau nu. Se pot face si doua imagini de tip sprite, una cu transparenta, cealalta fara.

O imagine de tip sprite se poate crea manual, sau pot fi folosite unelte online sau ofline pentru crearea acestora.

Ce faci dupa ce ai creat un image sprite?

Dupa crearea image sprite-ului trebuie sa il includem in design, pozitionarea imaginilor se face prin proprietatea css background-position, pozitionand astfel imaginile intr-un container. De exemplu, pentru imaginea de mai sus, pentru a afisa icon-ul retelei linkedin trebuie folosita pozitionarea astfel: background-position: -96px 0;
Exista tool-uri online care pe langa faptul ca va ajuta sa creati image sprite-ul, furnizeaza si un fisier css cu toate pozitionarile si inaltimile si latimile pentru fiecare imagine in parte din image sprite.

Avantaje

– numarul de requesturi HTTP catre server este mai mic.
– latimea de banda folosita scade.
– toate imaginile statice se incarca odata, astfel incat nu trebuie sa asteptam ca o imagine sa se incarce la roll over de exemplu.
– compatibilitate cross browser.

Dezavantaje

– intreaga imagine de tip sprite se incarca pentru fiecare pagina in parte, chiar daca exista elemente care nu sunt folosite.
– in functie de numarul de imagini continute, un image sprite poate ajunge la dimensiuni destul de mari.