Pubblicato il 26/10/13e aggiornato il

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

csssprite
css-sprite

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.

sprite-icone

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://lh3.googleusercontent.com/-XEWbxrYCv4M/UkYJn3PRAJI/AAAAAAAAjoI/UOOY9IS_dso/s640/social-icons.png) 0 -58px no-repeat; width: 58px; height: 58px;}
#twitter-icon {background: url(https://lh3.googleusercontent.com/-XEWbxrYCv4M/UkYJn3PRAJI/AAAAAAAAjoI/UOOY9IS_dso/s640/social-icons.png) -460px -58px no-repeat; width: 58px; height: 58px;}
#googleplus-icon {background: url(https://lh3.googleusercontent.com/-XEWbxrYCv4M/UkYJn3PRAJI/AAAAAAAAjoI/UOOY9IS_dso/s640/social-icons.png) -174px -58px no-repeat; width: 58px; height: 58px;}
#facebook-icon-b {background: url(https://lh3.googleusercontent.com/-XEWbxrYCv4M/UkYJn3PRAJI/AAAAAAAAjoI/UOOY9IS_dso/s640/social-icons.png) 0 -116px no-repeat; width: 58px; height: 58px;}
#twitter-icon-b {background: url(https://lh3.googleusercontent.com/-XEWbxrYCv4M/UkYJn3PRAJI/AAAAAAAAjoI/UOOY9IS_dso/s640/social-icons.png) -460px -116px no-repeat; width: 58px; height: 58px;}
#googleplus-icon-b {background: url(https://lh3.googleusercontent.com/-XEWbxrYCv4M/UkYJn3PRAJI/AAAAAAAAjoI/UOOY9IS_dso/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.




13 commenti :

  1. Ottimo articolo. :)

    Di solito io uso GIMP per creare le singole icone e Instant Sprite per unirle, ottenendo subito il css con le varie coordinate (ma anche così riesco a incasinarmi).

    RispondiElimina
    Risposte
    1. Ci sono anche
      http://spriteme.org/
      http://www.spritebox.net/
      però usarli nel modello è una cosa mentre per i post si perderebbe troppo tempo
      @#

      Elimina
    2. Grazie mille. Proverò anche questi. :)

      Ah... semplice curiosità: perché ci sono tre serie di icone se poi se ne vedono solo due (a e a:hover)?

      Elimina
    3. Quella immagine è stata creata da un grafico che non so chi sia e utilizzata da molti altri blogger. Ciascuno usa solo le icone che gli servono :)
      @#

      Elimina
  2. ciao Erne, santo cielo non capisco niente di niente ... arabo. per me. :-((( infinita ammirazione per te che cerchi di spiegare a noi profani (e sicuramente ci riesci ma io sono un caso disperato per questo genere di cose...). Sono capitata qui perchè stavo cercando di capire (.... leggi sopra...) come poter inserire sul mio blog nelle etichette anche un'immagine. Ossia per ogni categoria vorrei caricare una foto a mia scelta in modo che chi vuole andare a leggere tutte le ricette di quella categoria clicchi sulla foto da me prescelta : esempio... antipasti (e metto una foto che più mi piace non so ad esempio della mia insalata russa) secondi: un'immagine di un arrosto, dolci: un'immagine di una torta... e così via, ogni categoria con una foto non so se mi sono spiegata..santo cielo temo di no, se invece sai di cosa sto parlando sei veramente un alieno per me :-)

    RispondiElimina
    Risposte
    1. Se il problema è quello di creare una galleria di foto con ciascuna un link a una determinata immagine puoi usare questo codice

      <a href="http://batuffolando.blogspot.it/search/label/verdure"><img src="http://lorempixel.com/300/200/"></a>

      dove puoi cambiare verdure con un altra etichetta e l'immagine http://lorempixel.com/300/200/ con un'altra a tua scelta. La galleria di foto puoi crearla in questo modo
      http://www.ideepercomputeredinternet.com/2012/08/galleria-immagini-blogger.html

      Se invece vuoi mostrare una immagine diversa automaticamente a seconda della etichetta di un post leggi qui
      http://www.ideepercomputeredinternet.com/2010/03/etichette-icone-blogger-inserire-titolo.html
      @#

      Elimina
    2. sei gentilissimo :-) leggo e provo a capire... p.s. sì è l'ultima opzione che indichi quella che intendevo, non so come hai fatto a capire il mio linguaggio
      buona settimana!

      Elimina
    3. ...come non detto non capisco niente :-( non ci arrivo... grazie lo stesso ciao!

      Elimina
  3. ciao ernesto,posso farti una domanda riguardo ad un documento google docs che non riesco ad integrare bene in un post/pagina di blogger?

    RispondiElimina
    Risposte
    1. Il problema dello spazio non è che si può risolvere. Leggi qui
      http://www.ideepercomputeredinternet.com/2012/10/pdf-doc-docx-ppt-pptx-incorporati-blog-google-drive.html
      @#

      Elimina
  4. ma per creare questa striscia con le icone. non posso usare quelle creaste con illustrator trovate su internet in formate png, di dimensione 16x16, 32x32, 128,128, o 256x256??

    RispondiElimina
    Risposte
    1. Certo. Basta che le unisca in una immagine soltanto. Se sei esperta di grafica non avrai certo problemi
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.