TomStardust.com
Web Design, accessibilità, XHTML e CSS
Sei qui: Homepage » css, risorse utili » Usare gli sprite CSS
mar 30 2009
Usare gli sprite CSS
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.
Usi Twitter?
30 marzo 2009 alle 15:25
TedIo preferisco sempre fare tutto a mano, quando si tratta di CSS.
1 aprile 2009 alle 00:39
PiccoloSocrateMolto spesso, più che una immensa sprite image, è meglio crear-ne 2-3 di dimensioni più contenute e magari più gestibili.
1 aprile 2009 alle 01:59
grazianoMolto meglio a mano…
8 aprile 2009 alle 12:21
ziosteveDa 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.
22 settembre 2009 alle 11:00
LucaHo visto qualcosa in giro ma non sapevo che si trattase di questo, sicuramente può essere una buona idea!
8 novembre 2009 alle 15:46
Marco Pedota - Studio grafico ArtistikoBella 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.
8 novembre 2009 alle 17:03
Tom@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.