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:

Condividi su:
  • del.icio.us
  • Digg
  • Facebook
  • Upnews
  • Wikio IT
  • Segnalo
  • Sphinn
  • StumbleUpon

, , ,