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:
9 Commenti
E chi le sapeva ste cose? Bravo Julius! Ottimi consigli!
Nooo non avevo mai visto cosa c’era nelle immagini di google e youtube che figata!!!
“Julius 4 President”…6 Grande!!!!!!!
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 !!!
Pure io lo utilizzo per i RollOver ma non vedo l’ora di sperimentare qualcosa del genere! Grazie!
Devo fare un paio di prove perché questa proprio non me la ricordavo :D
Il logo di YT è smisurato! C’è tutto praticamente :P
Quindi se lo dice anche Julius i miei sforzi nell’ottimizzazione del tema di WordPress non sono stai vani….
Bene bene…
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…
Ottimo, grazie.