Corsi on-line

Velocizzare il caricamento delle pagine con gli sprite CSS

Ultimamente ci siamo occupati spesso delle soluzioni utili per velocizzare il caricamento delle pagine Web, tra queste ultime una procedura molto efficace riguarda l’utilizzo degli sprite CSS; in sostanza parliamo di una tecnica che permette di combinare più immagini in una singola immagine di dimensioni maggiori. Fatto questo si dovrebbero generare un minor numero di richieste HTTP verso il Web server con un guadagno in alcuni casi rilevante a livello di prestazioni.

Per dimostrare come l’utilizzo degli sprite CSS sia relativamente semplice, partiremo da una comune sequenza composta da 4 immagini distinte, ignorando l’utilizzo di tale tecnica esse verrebbero caricate separatamente dando origine ad altrettante richieste a carico del Web engine che gestisce le nostre pagine Internet:

Cattura

Nel caso specifico tutte le immagini impiegate hanno le stesse dimensioni (per praticità 800 pixel in larghezza per 1195 pixel in altezza, ma si consiglia di lavorare anche con dimensioni inferiori), una caratteristica non vincolante per la creazione dello sprite che però aiuta a velocizzare la definizione delle regole di stile e consente una migliore resa grafica dell’output mantenendo proporzioni e simmetria; il risultato che si desidera ottenere dopo l’elaborazione è invece il seguente:

csg-547ee666bf6c7

Per quanto riguarda il codice CSS, la proprietà background-position potrà essere utilizzata per spostare la superficie visibile su una delle immagini che compongono lo sprite e dovrà essere applicata su ognuna di esse:

.sprite-DSC6288{ background-position: 0 0; width: 800px; height: 1195px; }
.sprite-DSC6289{ background-position: 0 -1245px; width: 800px; height: 1195px; }
.sprite-DSC6295{ background-position: -850px 0; width: 800px; height: 1195px; }
.sprite-DSC6302{ background-position: -850px -1245px; width: 800px; height: 1195px; }

Nel caso in cui si disponga di un’immagine dello sprite, sarà inoltre utile includere anche una regola per il background che faccia riferimento ad essa:

#container li {
background: url(sprite.png) no-repeat top left;
}

Da notare come l’impiego dello sprite consentirà di evitare ritardi anche considerevoli nel caricamento delle immagini impiegate per il selettore :hover quando associato ai link.

Post correlati
I più letti del mese
Tematiche