Usare gli sprite CSS

Cosa sono gli sprite CSS? Una veloce spiegazione ed uno strumento per utilizzarli.

CSS SpritesL’utilizzo degli sprite CSS è una delle tecniche fondamentali da imparare quando si è alle prese con lo sviluppo di un sito. Consiste semplicemente nel riunire più immagini (spesso icone) in una più grande, come è possibile vedere nell’esempio qui a fianco (dove ho utilizzato alcune Silk Icons). Per selezionare quindi una singola immagine sarà sufficiente usare i CSS e la proprietà background-position.

Questa tecnica ha due vantaggi principali:

  1. diminuisce il numero di richieste HTTP al server migliorando le prestazioni del sito
  2. evita ritardi nel caricamento delle immagini usate per lo stato :hover dei link

Per velocizzare il lavoro e creare degli sprite CSS in pochi secondi, vi segnalo un fantastico CSS Sprite Generator che automatizza tutto il processo. Vi basterà caricare un file .zip contentente le immagini, impostare alcuni parametri come la distanza tra gli elementi ed il formato (png, gif o jpg), e lo strumento creerà anche le righe di CSS necessarie.

L’unico limite di questo tool è la dimensione del file da uploadare, che al momento non può superare i 500kb. Utile quindi per piccole immagini, mentre per files più ingombranti è necessario cercare altre alternative.

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

8 commenti su “Usare gli sprite CSS”

  1. Da tempo ero a conoscenza di questa funzionalità, ma non l’avevo mai utilizzata. Nella mia ultima realizzazione invece (www.matumaini.org), l’ho provata e devo dire che i risultati sono stati veramente ottimi, finalmente non ottengo più ritardi sullo stato :hover.

  2. Bella storia, già da tempo avevo intravisto in giro cose simili, ma le ritenevo antiquate.
    Ma c’è realmente questo guadagno in prestazioni?
    Io penso che può esserci per grandi gallerie di icone molto usate, tipo inconcine per avatar di un forum o cose simili.

  3. @Marco: usare questa tecnica non costa niente, ed i vantaggi ci sono… ogni richiesta in meno al server è un guadagno da non trascurare, che sicuramente si nota ancora di più in pagine con molte icone.