La necessità di ottimizzare il caricamento di immagini all’interno di un sito può essere un punto cruciale nell’esperienza che i visitatori hanno navigandoci.
Esiste una tecnica che permette di caricare un unico file, quindi di fatto una solo richiesta al server, per poi “ritagliare” le immagini in esso contenuto secondo le nostre necessità: sto parlando appunto degli Sprite CSS.
La tecnica non è nuova, ma mi ci sono imbattuto facendo qualche esperimento su un’immagine con carte da gioco ed è decisamente molto utile.
Procediamo quindi con un esempio.
Se abbiamo un file come quello allegato che contiene tutto un set di carte da gioco…sarebbe alquanto dispendioso in termine di risorse e di tempo, caricare singola carta per singola carta.
Set di carte da gioco
Cosa fare quindi?
Prima di tutto è necessario identificare la dimensione dell’immagine che si intende “ritagliare”, nel nostro caso le carte hanno una altezza di 312 px ed una larghezza di 223 px
Individuato queste due proporzioni sarà poi possibile, partendo dal punto 0 (sinistra) e 0 (alto) individuare tutte le carte, inserendo i valori con il segno negativo.
Nell’esempio sotto vengono visualizzati l’asso di fiori e il back rosso della carta.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <style> #asso_fiori { width: 223px; height: 312px; background: url(imgs/playing_card_assets_large.png) 0px 0; zoom: .5; border-style: solid; } #back_red { width: 223px; height: 312px; background: url(imgs/playing_card_assets_large.png) -223px -1251px; zoom: .5; border-style: solid; } </style> </head> <body> <img id="asso_fiori" src="imgs/transparent.png"><br><br> <img id="back_red" src="imgs/transparent.png"><br><br> </body> </html> |
Per l’immagine transparent basta scaricarne una cercando su google.