Come usare la tecnica sprite applicandola ai CSS

La tecnica sprite consiste nel raggrupare in una sola immagine un certo numero di immagini differenti l’una dall’altra con lo scopo di richiamare una porzione di questa unica immagine in base a qualche scopo.

Questa tecnica ha avuto diverse applicazioni una delle prime fu l’uso in alcuni videogiochi, specialmente nei giochi di ruolo(RPG) per animare un personaggio, guarda l’esempio sotto che ha come soggetto il protagonista del famoso video gioco Monkey Island per capire come poteva essere una immagine sprite di partenza.

Per quanto riguarda il web la tecnica sprite permette di ottimizzare il tempo di caricamento di una pagina web, riducendo il numero di richieste HTTP e riducendo il peso in KB di radunando tutte le immagini in una sola.

Il processo per la creazione di una sprite

Per prima cosa bisogna scegliere quali immagini si vogliono, o meglio, sarebbe intelligente usare in una sprite, di solito tutto ciò che in una pagina web riguarda loghi e icone è consigliabile inserirlo, per farti una idea ecco l’immagine sprite utilizzata da Youtube tempo fà.

Dopo aver deciso bisogna comporre la mappa con tutte le immagini, per farlo sarà sufficiente aprire un programma di grafica come Photoshop, e cominciare ad affiancare le immagini scelte, in questo procedimento è importante tenere d’occhio le coordinare x e y perchè dopo serviranno insieme ai CSS.

In questo esempio ho preso una icona di Facebook di dimensione 64x64px, l’ho aperta con Photoshop e a quella originale ne ho affiancata una copia con i colori desaturati (Scala di grigi) e l’ho salvata con il nome facebook-sprite.png e lo sfondo trasparente.

Terminata la mappa generale è il momento di usare la proprietà CSS background e le coordinate giuste per mostrare la porzione di immagine desiderata in base all’elemento HTML della pagina web che dovrà mostrare quella porzione, quindi:

elemento {
          width:64px
          height:64px /* imposto l'area visibile*/
          background-image: url(/facebook-sprite.jpg); /* Richiamo l'intera immagine */
          background-repeat: no-repeat;
          background-position: 0px 0px; /* allineo l'immagine sull'asse x e y a 0px per mostrare
la prima icona di Facebook, quella colorata. */
}

Si potrebbe usare poi lo pseudoelemento dei CSS :hover per fare in modo che quando il mouse finisce sopra l’elemento HTML in questione compaia un’altra zona della immagine mappa e venga mostrata l’icona di facebook desaturata.

elemento:hover {
          width:64px
          height:64px /* Imposto l'area visibile */
          background-image: url(facebook-sprite.jpg); /* Richiamo nuovamente l'intera immagine */
          background-repeat: no-repeat;
          background-position: -64px 0px; /* Allineo l'immagine sull'asse X a -64px e Y a
0px in maniera da mostrare la parte della mappa immagine con l'icona desaturata di Facebook*/
}

le coordinate della proprietà background-position sono cambiate ciò vuole dire che quando il mouse si sposterà sopra l’elemento HTML l’immagine mappa di sfondo si sposterà di 0 px dall’alto e -64px da sinistra portando alla vista un’altra porzione dell’immagine di sfondo, in questo caso l’icona di Facebook grigia.

Dopo aver capito il giochino potrai anche raggruppare le proprietà utilizzate in una sola per semplificare e velocizzare il lavoro, come nell’esempio sotto:

elemento { width:64px; height:64px; background: url(facebook-sprite.png) no-repeat -64px 0px;}

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco