CodeSnippet

Immagine strana? No, niente affatto. Provate a cercare qualcosa con Google, in alto, vicino alla barra di inserimento del testo, c’è il logo di Google, visualizzate l’immagine e vi porterà a questo.

Perchè un’immagine del genere? Il motivo è semplice, ottimizzare il caricamento delle immagini di una pagina. Mettendo tutte le icone all’interno di un’unico file (come in questo caso) si riducono le richieste HTTP da fare al sito per scaricare tutte le immagini dello stesso, in quanto se ne scarica solamente una, quella che le contiene tutte. Può tornare utile quando si ha un sito con molte icone piccole (ad esempio 16×16).

Oltre a questo, un vantaggio molto grande, è quello di evitare il ritardo di caricamento delle proprietà hover dei CSS. Ad esempio, rifacendosi all’immagine di Google, ci sono le frecce in alto chiare e quelle verdi. All’hover del mouse (quando il mouse ci si posizione sopra) viene cambiata l’immagine classica con quella verde. Quest’operazione, se è fatta usando due immagini distinte, porta ad un leggero ritardo, perchè l’immagine da visualizzare al posto di quella precedente deve essere scaricata. Usando invece questa tecnica, l’immagine è stata già scaricata all’inizio e non si ha nessun tipo di ritardo.

A questo punto uno si chiede come fare ad usare le immagini singole. La risposta è semplice, sfruttando i CSS e la proprità background-position, che ci permette di selezionare una parte di una immagine e non tutta.

Questi ad esempio sono due modi di fare la stessa cosa, uno usando i CSS Sprites e uno senza. Partiamo dal secondo, quello senza.

Per usarlo basta <a class="link" href="http://codesnippet.biz"> CodeSnippet</a>.
E questo l’altro.

Come vedete, in questo caso, l’immagine caricata e una e viene fatto all’inizio, quando si apre la pagina. L’ultilizzo è il medesimo. Per convincervi di quanto detto fin’ora ho fatto un esempio sul sito. Qui trovate quello senza css sprites e qui quello con css sprites.

Ovviamente la differenza la noterete alla prima apertura, quando le immagini non sono state ancora inserite nella cache del browser. Il problema si nota poco (le immagini sono piccole), ma vi assicuro che c’è un ritardo di caricamento in quella che non utilizza i CSS Sprites (che noterete soprattuto se avete connessioni non particolarmente veloci).

Post correlati: