CSS: Image Sprites

0 Flares Twitter 0 Facebook 0 LinkedIn 0 Email -- StumbleUpon 0 0 Flares ×

In termini di performance delle pagine html noi possiamo ottenere risultati migliori riducendo il numero di richieste che la nostra pagina fa al server (HTTP requests).

A tal riguardo sappiamo che una pagina web con molte immagini può prendersi molto tempo per caricare, generando multiple richieste al server. Attraverso i CSS sprite (collezioni di immagini inserite all’interno di una singola immagine) noi riduciamo il numero delle richieste HTTP al server e risparmiando larghezza di banda.

I CSS sprite sono infatti una strategia per ridurre il numero di richieste al server di immagini inserendo varie più piccole immagini all’interno di una più grande, in modo tale che ci sarà un’unica richiesta al server invece di multiple. E l’immagine unica che contiene le immagini multiple più piccole è chiamata “sprite”.

Per posizionare le varie immagini all’interno dell’elemento ci si serve della proprietà background-position, a cui passeremo le coordinate della parte di immagine che vogliamo sia visualizzata.

Prima di vedere come realizzare una immagine sprite è fondamentale dire che esistono in rete svariati sprite generator che sono in grado di crerare per noi immagini sprite agevolmente; due esempi sono SpriteMe, CSS Sprite Generator, csssprites.com o vedi qui. Di notevole interesse anche l’articolo di Sven Lennartz su Smashing Magazine “The Mistery of CSS Sprites: Techniques, Tools and Tutorials“, che comprende, tra l’altro, ottimi esempi di CSS sprite.

Un esempio:
Usiamo la seguente immagine sprite

sprite

Il primo passo è proprio quello di creare (con Photoshop, Fireworks, Gimp…) una immagine che consiste in una serie di immagini separate tra loro da una sottile linea di 1px, linea che non è comunque indispensabile, ma utile per la disposizione delle immagini attraverso i CSS. Avremo quindi un unico file contenente le immagini di cui abbiamo bisogno.

Raggrupate in un unico file tutte le immagini di cui abbiamo bisogno per il nostro menu (ma si può fare lo stesso procedimento addirittura per tutte le immagini di cui abbiamo bisgno in tutta la pagina) tale immagine verrà richiamata dai CSS, caricata per intero, ma, attraverso la proprietà background-position faremo visualizzare solo le parti che ci interessano nelle posizione che decidiamo.

Ora creiamo un menu, utilizzando l’immagine vista sopra come sfondo su ogni elemento span. Quindi utilizzeremo le classi per cambiare la posizione dell’immagine di sfondo, in modo da utilizzare icone differente ad ogni span.

HTML

CSS

 

Vediamo un altro esempio (semplificato) di sprite (social).

Creiamo il markup HTML:

Adesso i CSS:

Notiamo come nel markup html, ogni voce dell’elenco è dotata di 2 classi: la classe hide viene utilizzata come un selettore per applicare la tecnica dell’image replacement, mentre la seconda classe si riferisce al collegamento al particolare social cui si riferisce: essa, tramite la proprietà background-position stabilisce quale icona dovrà essere mostrata per quella particolare voce dell’elenco.

Da notare che tutti gli elementi link (a) hanno come background l’immagine complessiva. Sarà poi l’aggiunta della specifica classe social a stabilire quale icona apparirà, mediante la proprietà background-position, la quale è impostata differentemente per ogni link, in modo che, attraverso le diverse coordinate, per ogni link verrà mostrata solo una porzione del file di sfondo.

N.B.: Nonostante l’evidente utilità di questa tecnica ed il suo ampio utilizzo che ne viene fatto anche da grandi portali, non sempre è conveniente utilizzarla; quando le singole immagini sono di dimensioni piuttosto elevate è consigliato caricarle singolarmente, perchè si rallenterebbe di molto il caricamento della pagina.

 

Articoli interessanti sull’argomento:

0 Flares Twitter 0 Facebook 0 LinkedIn 0 Email -- StumbleUpon 0 0 Flares ×