Css Sprites

La tecnica CSS Sprites non è nuova ma mi incuriosisce molto, ammetto di non averla usata spesso (tranne nei menu) ma seguo gli articoli che trovo in rete.
Consiste nel caricare una sola immagine che contenga tutte le icone, bottoni del sito e utilizzando la proprietà background-position dei css spostarla affinché mostri la porzione interessata al momento giusto.
Questa tecnica permette di alleggerire le pagine  riducendo il numero di richieste http al server, viene usata anche  dai grandi portali come Google, Youtube, Facebook per l’inserimento di tutte le icone principali del sito, di rating ecc.

L’articolo su AlistApart permette di conoscere tutti gli utilizzi di questa ottima tecnica: http://www.alistapart.com/articles/sprites/
C’è chi la definisce come una tecnica misteriosa riportando molti esempi di siti che la utilizzano: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Anche il LAU – Laboratorio di Accessibilità e Usabilità ne parla con un utile articolo in italiano con le istruzioni per implementare la tecnica.
In tutti gli articoli viene consigliato l’utilizzo di CSS Sprites Generator, se ne trovano di diversi tipi in rete e in pratica fanno tutto il “lavoro sporco” per noi, restituendoci le immagini già composte con le posizioni corrette. 
L’unico neo  riguarda l’accessibilità, in quanto non è possibile utilizzare testo alternativo (tag alt) sulle immagini, inoltre se usiamo questa tecnica per visualizzare loghi e parti grafiche rilevanti del sito, dobbiamo sapere che non ci sarà possibilità di stamparle.

Vale