HomeBlogCSS sprite per migliorare le performance del vostro sito

CSS sprite per migliorare le performance del vostro sito

Scritto il -   - Massimo Della Rovere

La tecnica del CSS sprite ci permette di gestire tramite un’unica immagine più elementi grafici del nostro sito, ad esempio bottoni, icone per differenti azioni, immagini da sostituire agli elenchi puntati tradizionali ed altro ancora. Il principale motivo di unire tutto in un’immagine è quello di evitare decine di accessi HTTP al nostro sito per caricare le immagini legate ai singoli elementi CSS che abbiamo definito nel nostro foglio stile, in maniera tale da migliorare le performance e il tempo di rending globale della nostra pagina web.

CSS Sprite

Sprite YoutubeL’efficacia di questa tecnica è dimostrata anche dal largo uso di molti portali importanti come Amazon, Google plus, Youtube e molti altri. Nell’esempio di youtube riportato qui di fianco potete vedere quanti elementi vengono visualizzati tramite l’accesso ad una solo immagine che poi verrà elaborata tramite i comandi CSS di background-image e background-position sull’elemento HTML. Ad esempio con l’immagine qui di fianco la home page di youtube usa il seguente comando CSS:

#logo {
  background:url("urlimage") no-repeat scroll -14px 0;
  float: none;
  height: 37px;
  width: 93px;
}

Qui viene definito un elemento con id “logo” con un’altezza di 37px e una larghezza di 93px e viene specificata una background position di -14px sull’asse x in quanto come potete vedere dalla piccola immagine i primi 14px sono occupati da un piccolo fumetto.

Quindi conoscendo le coordinate x e y in pixel di ogni singola immagine possiamo configurare molti elementi diversi specificando un background-position specifico per ognuno di essi. Ovviamente questa tecnica funziona bene solo se gli elementi HTML hanno una dimensione fissa e predefinita e devono avere come valore di ripetizione background-repeat:no-repeat.

Questa tecnica risolve anche il problema delle immagini di background per gli eventi hover, infatti quando ad esempio un bottone aveva definito due immagini di background una per la visualizzazione normale e l’altra per quanto ci si passava sopra con il mouse, succedeva spesso che per un secondo l’immagine definita come :hover non veniva subito visualizzata in quanto prima veniva fatta una chiamata HTTP al server web per caricarla in memoria, invece con la tecnica del CSS sprite questo non può succedere dato che l’immagine è sempre la stessa.

Esempio di codice per utilizzare la tecnica CSS con gli sprite

Facciamo un esempio e prendiamo questa immagine che rappresenta delle frecce per precedente e successivo con una dimensione di 60×60 pixel e quindi ogni freccia occupa uno spazio di 30×30 pixel. Andremo a definire due elementi HTML ad esempio con classe “next” e “prev” con i rispettivi comandi CSS con il selettore specifico :hover in maniera tale che quando ci posizioniamo sulla freccia visualizzata, con il nostro cursore, l’immagine cambia dalla versione in nero a quella in bianco.

a.next, a.prev {
  width:30px
  height:30px;
  background:url('images/sprite.png') no-repeat;
}
a.prev {
  background-position:0px 0px;
}
a.next {
  background-position:-30px 0px;
}
a.prev:hover {
  background-position:0px -30px;
}
a.next:hover {
  background-position:-30px -30px;
}

Alcuni siti web che parlano di CSS sprite

Autore:
Massimo Della Rovere
Articoli:
140
Website:
http://startbyzero.com/
Nato a Roma nel 1968, appassionato di informatica, programmatore e sistemista su IBM iSeries, esperto in procedure web con PHP e MySQL, grande utilizzatore dei prodotti Google, Linux, Wordpress ed Amazon AWS. Attualmente vive in Perù nella città di Lima, da dove porta avanti il suo progetto favorito riguardante il blog multitematico di startbyzero.com. Per contattarlo basta seguirlo sul profilo pubblico presente nel social network di google+.

Scrivi un tuo commento o qualche consiglio