Cosa sono gli sprite CSS? Una veloce spiegazione ed uno strumento per utilizzarli.
L’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:
- diminuisce il numero di richieste HTTP al server migliorando le prestazioni del sito
- 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.
Io preferisco sempre fare tutto a mano, quando si tratta di CSS.
Molto spesso, più che una immensa sprite image, è meglio crear-ne 2-3 di dimensioni più contenute e magari più gestibili.
Molto meglio a mano…
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.
Ho visto qualcosa in giro ma non sapevo che si trattase di questo, sicuramente può essere una buona idea!
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.
@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.