Come usare i CSS Sprite per ottimizzare il caricamento delle immagini.

Come creare delle immagini per usare i CSS Sprite e velocizzare il caricamento delle pagine.

Saprete certamente che uno dei parametri usati da Google per determinare il posizionamento delle varie pagine web è la sua velocità di caricamento. Vale a dire che a parità di altri fattori una pagina o comunque un sto che è più lento ad aprirsi si posiziona peggio. La velocizzazione del web è una specie di missione per Google che invita gli webmaster a fare molta attenzione su questo punto anche usando tool appositi come Page Speed Insights o Pingdom.

Le immagini rappresentano uno degli elementi che rallentano maggiormente il completamento del download del browser. Si può cercare di ottimizzare le immagini soprattutto se inserite nel template operando su di esse con appositi tool di compressione. Un'altra tecnica molto ben vista da Google è quella di usare i CSS Sprite. In realtà probabilmente li state già utilizzando senza neppure saperlo. I CSS Sprite sono infatti utilizzati in molti widget tra cui le icone in 3 dimensioni e le piccole icone per i social. In entrambi i casi invece di usare una immagine per ogni collegamento viene utilizzata una sola immagine che le contiene tutte. Ecco quelle usate nei due esempi precedenti

Si tratta rispettivamente di 8 e di 33 immagini riunite in una soltanto. In questo modo si potrà utilizzare un solo background per mostrare tutte le icone. Il browser dovrà quindi richiedere un solo URL con grande vantaggio per la velocità di caricamento. Si può creare da soli una immagine per i CSS Sprite incollando una accanto all'altra tutta una serie di immagini. Con Photoshop o Gimp si può iniziare con un Nuovo Progetto a sfondo trasparente per poi incollarci le varie immagini.

Bisogna conoscere le dimensioni di ciascuna foto e determinarne le coordinate nello Sprite. Le dimensioni e altre informazioni possono essere ricavate con delle estensioni di Chrome mentre la posizione è quella classica delle coordinate cartesiane ortogonali. Bisogna ricordarsi che i segni saranno tutti negativi a partire dall'origine degli assi che sarà in alto a sinistra dello Sprite.

Se  volessimo mostrare l'icona blu di Facebook dovremo imporre le coordinate (0, -58) mentre l'icona nera di Twitter avrà coordinate (-460,-116). Per esempio per mostrare in una tabella tre icone colorate e tre icone nere di Facebook, Twitter e Google Plus useremo questo codice

<style>
#facebook-icon {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8ztxKG5VJeNaY_9kVrEhPy-risUBuGW-wiGFf4Wfksvkfm2r-ky9WSfW8cyFtB9bU6dvqXs3TRVUFY0eaYC6Gp8LleePEPHl7VzZb3JJ1u38qzsIjtA82ID-AzqlJLAyVbIPWCXP2qg/s640/social-icons.png) 0 -58px no-repeat; width: 58px; height: 58px;}
#twitter-icon {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8ztxKG5VJeNaY_9kVrEhPy-risUBuGW-wiGFf4Wfksvkfm2r-ky9WSfW8cyFtB9bU6dvqXs3TRVUFY0eaYC6Gp8LleePEPHl7VzZb3JJ1u38qzsIjtA82ID-AzqlJLAyVbIPWCXP2qg/s640/social-icons.png) -460px -58px no-repeat; width: 58px; height: 58px;}
#googleplus-icon {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8ztxKG5VJeNaY_9kVrEhPy-risUBuGW-wiGFf4Wfksvkfm2r-ky9WSfW8cyFtB9bU6dvqXs3TRVUFY0eaYC6Gp8LleePEPHl7VzZb3JJ1u38qzsIjtA82ID-AzqlJLAyVbIPWCXP2qg/s640/social-icons.png) -174px -58px no-repeat; width: 58px; height: 58px;}
#facebook-icon-b {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8ztxKG5VJeNaY_9kVrEhPy-risUBuGW-wiGFf4Wfksvkfm2r-ky9WSfW8cyFtB9bU6dvqXs3TRVUFY0eaYC6Gp8LleePEPHl7VzZb3JJ1u38qzsIjtA82ID-AzqlJLAyVbIPWCXP2qg/s640/social-icons.png) 0 -116px no-repeat; width: 58px; height: 58px;}
#twitter-icon-b {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8ztxKG5VJeNaY_9kVrEhPy-risUBuGW-wiGFf4Wfksvkfm2r-ky9WSfW8cyFtB9bU6dvqXs3TRVUFY0eaYC6Gp8LleePEPHl7VzZb3JJ1u38qzsIjtA82ID-AzqlJLAyVbIPWCXP2qg/s640/social-icons.png) -460px -116px no-repeat; width: 58px; height: 58px;}
#googleplus-icon-b {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8ztxKG5VJeNaY_9kVrEhPy-risUBuGW-wiGFf4Wfksvkfm2r-ky9WSfW8cyFtB9bU6dvqXs3TRVUFY0eaYC6Gp8LleePEPHl7VzZb3JJ1u38qzsIjtA82ID-AzqlJLAyVbIPWCXP2qg/s640/social-icons.png) -174px -116px no-repeat; width: 58px; height: 58px;}
</style>
<table><tr><td>
<div id="facebook-icon"></div></td><td>
<div id="twitter-icon"></div></td><td>
<div id="googleplus-icon"></div></td></tr><tr><td>
<div id="facebook-icon-b"></div></td><td>
<div id="twitter-icon-b"></div></td><td>
<div id="googleplus-icon-b"></div></td></tr></table>

che produrrà questo risultato

In sostanza al posto di un URL di una immagine ci possiamo mettere un div con lo sfondo della immagine Sprite in cui si sia settata la giusta posizione tramite un programma di grafica.