CSS Sprites: Ottimizzare le immagini di una pagina web

- Letture: 3.891

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:

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

9 Commenti

  1. Nooo non avevo mai visto cosa c’era nelle immagini di google e youtube che figata!!!

  2. Fantastico… io di solito lo uso per il rollover su mouse hover…. ma effettivamente si può utilizzare per rendere dinamica l’immagine del logo… !!! Splendido !!!

  3. Pure io lo utilizzo per i RollOver ma non vedo l’ora di sperimentare qualcosa del genere! Grazie!

  4. Geniale, semplicemente geniale.
    Ma è proprio quello che facevano nei vecchi giochi, vero?
    Comunque devo documentarmi, studiare sta tecnica ed applicarla, che si risparmia un bel po…

Commenti