CSS Sprite: a cosa servono e come utilizzarli

Il funzionamento dei css sprite

Questo post è uno di quegli approfondimenti a metà tra gli articoli che parlano di web design e quelli che parlano di SEO. In altre parole siamo di fronte ad una guida per velocizzare un sito lento a caricare.

Che cosa sono i css sprite

Un css sprite è una tecnica di ottimizzazione delle prestazioni di un sito che combina più immagini in una singola immagine chiamata sprite sheet o tile set. Gli sprite riducono la congestione sul server riducendo il numero di richieste (download) necessarie per eseguire rendering di una pagina web.

In altre parole tutte le immagini vengono compattate in un’unica immagine e quando l’utente tramite il suo browser ne ha richiesta, gli viene restituita la porzione di immagine di cui ha bisogno. Quindi invece di scaricare molte immagini (piccole o grandi) viene scaricata un’unica immagine di grandi dimensioni.

Gli sprites vengono tipicamente utilizzati per inglobare immagini delle stesse dimensioni (come loghi, bottoni ecc…). Quando un bottone deve essere utilizzato in una pagina web, viene ripescato sullo sprite ed incorniciato sulla pagina nel punto in viene richiesto.

Questa tecnica oltre a migliorare i tempi di caricamento del sito e quindi la user experience, è apprezzata anche dalle aziende che così evitano a livello di hosting, di vedere utilizzata in maniera inutile parte della loro band width mensile.

Come creare un Css Sprite

Le fasi della creazione di un css sprite sono:

1. Creare un’immagine con una struttura a griglia (il formato PNG potrebbe andare bene)
2. Posizionarci sopra le immagini da aggregare in un’unica immagine
3. Creare il css con le classi che definiscono la dimensione di ogni immagine e la sua posizione nell’immagine sprite
4. Includete nella pagina web un tag img con un’immagine segnaposto che fa riferimento allo sprite CSS tramite ID o classe. Quando la pagina viene caricata, l’immagine segnaposto sarà sostituita dallo sprite.

Tool per creare un Css Sprite

La buona notizia è che esistono numerosi siti e tool online per utilizzare le tecniche legate ai css sprite. Cliccate qui per vedere i principali. Esistono anche dei plugin Worpdress che se ne occupano ma le recensioni non promettono nulla di buono!