La tecnica CSS Sprites consiste nel caricare una singola immagine e spostarle con l’ausilio di codice CSS al fine di aver una sola richiesta (HTTP request), allegerendo la pagina e velocizzandone la visualizzazione.

Dal punto di vista dei CSS, tutto consiste nell’usare la proprietà background-position per visualizzare l’area dell’immagine che ci interessa.

Andiamo a vedere come Google e YouTube utilizzano questa tecnica.

Casi di studio

Non ditemi che non avete mai provato a cliccare con il tasto destro sul logo interno di Google selezionare Visualizza immagine.

Come possiamo notare Google utilizza la tecnica CSS Sprites, unica immagine con tutti gli elementi più in uso.

http://www.google.it/images/nav_logo4.png – Peso del file .png 6.96 kB.

Altro esempio calzante è YouTube, famoso portale di condivisione video.

Se andiamo ad analizzare il codice HTML arriveremo all’immagine totale del logo ovvero questa in basso.

http://s.ytimg.com/yt/img/master-vfl65847.gif – Peso del file .gif 32 kB.

Vediamo come è semplice apprendere nuovi elementi di un portale conoscendo l’uso di questa tecnica.

In questo caso possiamo notare le icone di Facebook, iGoogle, Chrome e molte altre ancora, interessante no?

Links utili

L’immagine contenete i vari oggetti può essere realizzata con un comune editor di immagini, oppure per ottimizzare il proprio tempo bisogna sapere che esistono tools che possono darci una mano.

Vi segnalo:

Letture Consigliate per CSS

Articoli simili


Autore:

Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.