Sprite CSS

CSS Sprites: Cosa sono e Come Usarli

Sicuramente avrete già letto in vari tutorial il termine Sprite CSS e magari avete anche seguito qualche tutorial alla lettera per raggiungere lo stesso risultato, ma abbiamo veramente capito il concetto alla base di questa tecnica?  

Tutto nasce da una grossa immagine che contiene tutte le piccole immagini che compongono il nostro layout, potremmo quasi affermare che questa tecnica non è altro che una naturale evoluzione di un vecchio effetto che usavamo qualche anno fa per simulare il cambio di stato di un bottone mentre il puntatore del mouse si posizionava sopra di esso che, per ridurre i tempi di caricamento di una nuova immagine, agiva sullo spostamento del background dell’immagine per mostrarne una sviluppata appositamente per l’effetto hover.

Ok magari mi potrete controbattere dicendomi che con le tecniche che ci hanno messo a disposizione i CSS3 questa tecnica è piuttosto obsoleta e io non avrei da dire niente in contrario, ma mi è servita per farvi capire che i CSS Sprite non sono altro che una estenzione di questa tecnica con la quale potremmo migliorare le prestazioni dei nostri siti web delegando tutte le varie immagini che potremmo utilizzare come background ad una unica immagine.

Grazie a questa caratteristica ridurremo in modo considerevole le chiamate HTTP, che in alcuni casi sono il collo di bottiglia dei vostri progetti, e saremo anche in grado di salvare più spazio, visto che una unica grande immagine occupa generalmente meno spazio di 100 piccole immagini; a breve vedremo con i fatti cosa intendo con queste parole, ma prendiamoci il tempo per avvicinarsi ulteriormente a questo concetto.

Richieste HTTP

Come tutti sappiamo, tutti i nostri progetti che vivono sul web devono la loro esistenza ad un protocollo ben particolare, il protocollo HTTP. Senza entrare nel dettaglio sappiate che questo protocollo aiuta i nostri browser nel richiedere e scaricare le nostre pagine HTML, i CSS, ma anche JavaScript e, nel nostro caso specifico, le immagini. Siccome questo protocollo non è asincrono, per prima cosa è limitato ad un rapporto request-download le connessioni hanno un tempo di latenza tra la richiesta e l’inizio del download, e questo è vero per ogni connessione HTTP.

Aggiungiamo a questo il fatto che l’HTTP non è in grado di gestire più 2 o 4 connessioni in parallelo, dipende anche dal tipo di server, il tempo di attesa potrebbe variare notevolmente a seconda del numero di richieste che un server deve sostenere. Restate con me arriviamo subito al dunque!

Tutto questo discorso teorico ci ha introdotto al concetto che per ogni immagine, che sia questa dichiarata tramite l’elemento <img> oppure caricata dai nostri CSS, dovrà aprire una nuova connessione di download; questo si traduce in:

  • tempo per inviare la richiesta;
  • tempo per eseguire la richiesta;
  • tempo per inviare una risposta;
  • tempo per scaricare effettivamente l’oggetto (che può variare a seconda della grandezza dell’immagine).

Uno studio di qualche anno fa condotto dalla Yahoo ha dimostrato che il maggior tempo speso dal caricamento di una pagina web non risiede tanto nella richiesta e avvenuto download della pagina HTML, ma piuttosto da tempo speso tra richieste HTTP e un download delle immagini. Grazie a questo studio siamo adessi tutti a conoscenza che uno dei principali fattori che possono migliorare la velocità dei nostri progetti risiede proprio nel concentrarsi nel ridurre il numero di richieste HTTP. Ovviamente questa dichiarazione si riferisce a tutte le richieste che una pagina HTML potrebbe aver bisogno (primi fra tutti le librerie JavaScript o i file CSS) ma in questo articolo ci andremo a focalizzare sul ridurre il numero di connessioni HTTP agendo sul numero delle nostre immagini.

Meglio Grande che Molte

Ma è proprio vero che una grossa immagine, magari contenente un numero elevato di piccole immagini al suo interno, occupi meno spazio dello stesso numero di immagini salvate e ottimizzate separatamente? Andiamo a vedere dal vivo un esempio con queste immagini e se non credete a quello che leggerete vi autorizzo a scaricare le immagini e testare il tutto insieme a me! Le immagini in questione sono rappresentate da due screenshot presi da un articolo scritto qualche tempo fa che ci introduceva alle tecniche per costruire un bottone con i CSS3 e il risultato è quanto segue:

Due stati di un bottone

L’immagine rappresenta i due stati di un bottone, la prima immagine rappresenta il bottone così come è, mentre la seconda rappresenta il bottone nel suo stato hover (ovvero quando il puntatore del mouse si trova sopra di esso. Per coloro che hanno già letto il tutorial sapranno benissimo che al giorno d’oggi questo effetto è facilmente realizzabile grazie all’utilizzo dei CSS3, ma stiamo parlando di peso di immagini quindi restate ancora un pò con me!

Le singole immagini salvate hanno un peso di 12kb ciascuna, quindi per poter mostrarle i vari browser dovranno scaricare ben 24kb di dati (e stiamo parlando di due semplicissime immagini!!!). Ma se invece apriamo Photoshop ed uniamo le due immagini possiamo vedere che lo spazio occupato da entrambe è di soltanto 16kb, soltanto 4kb in più rispetto alla singola immagine! Ed inoltre dobbiamo ricordarci che abbiamo ridotto le richieste HTTP ad una al posto delle due precedentemente necessarie.

Riduciamo il nostro lavoro

Messa in questo modo la realizzazione di una immagine adatta all’utilizzo degli sprite sembra un sacco di lavoro e se volete realizzarle da voi lo sarà! Ma per fortuna internet si è riempita di soluzioni gratuite che ci permetteranno di creare in modo automatico queste immagini e le regole CSS necessarie al loro utilizzo, l’unica cosa che dovremmo avere pronta sarà il progetto completamente funzionante e sviluppato come abbiamo sempre fatto, ovvero una immagine per ogni sfondo. Una delle migliori applicazioni che ho trovato prende il nome di SpriteMe, andiamo a vedere il suo funzionamento.

Usiamo SpriteMe

Una delle applicazioni gratuite che di cui parlavo precedentemente prende il nome di SpriteMe e non è altro che una interessantissima web app che potrà aiutarci a  velocizzare lo sviluppo di questa tecnica. Usare questa app sarà semplice come sviluppare i nostri layout nel modo a noi più comune, ovvero ritagliando le grafiche dove necessario per ricorstruirle sulle pagine HTML e a template terminato potremmo andare a chiedere aiuto a SpriteMe!

Infatti installando una semplice bookmarklet trasformeremo il nostro browser in un centro di controllo per la costruzione di immagini sprite pronte a ridurre le nostre richieste HTTP e anche il peso delle nostre immagini! SpriteMe sarà in grado di analizzare la pagina sul quale è stata attivata la bookmarklet, trova tutte le immagini e propone quelle da inserire all’interno dello sprite, e quali no, se decidiamo di esportare il tutto ci fornirà anche una immagine sprite pronta e il codice CSS necessario!

Troppo bello per essere vero? Proviamo direttamente su HTML5 AndMore!

1 – Installiamo la bookmarklet

Per prima cosa quello che dobbiamo fare è recarsi nella home di SpriteMe e trascinare il link accanto alla scritta drag this link verso la nostra barra dei preferiti:

Installa SpriteMe

Semplice vero?

Adesso che abbiamo la bookmarklet installata andiamo su HTML5 AndMore, e clicchiamo all’interno del bookmark SpriteMe appena installato.

2 – Visualizziamo i Suggerimenti

Una volta cliccato il nostro browser eseguirà un refresh della pagina, ma non si tratta di un semplice refresh… In questo caso la pagina verrà analizzata da SpriteMe che rivelerà tutte le immagini utilizzate per costruire la pagina HTML fornendocene una lista; questa lista sarà suddivisa in due, immagini che possono essere utilizzate come sprite e immagini che vengono sconsigliate per la posizione che assumono all’interno della pagina HTML, ma niente ci vieterebbe di volerle aggiungere!

Ecco il risultato che otteniamo:

SpriteMe in azione su HTML5 AndMore

Ecco cosa trova SpriteMe su HTML5 AndMore

Se guardate lo zoom dell’immagine noterete che ho evidenziato alcune immaigni nella parte superiore e in quella inferiore della lista. Volevo farvi notare che da quella semplice lista è possibile modificare quali immagini verranno inserite o meno all’interno dello sprite con un semplicissimo drag’n drop, infatti lo sprite relativo alla barra admin è stato tolto dallo sprite!

Adesso che abbiamo selezionato le immagini da usare, lasciamo fare a SpriteMe!

3 – Make Sprite!

Adesso tutto quello che ci resta da fare è cliccare il bottone mae sprite, SpriteMe inizierà a elaborare una immagine sprite contenente tutte le immagini che avete inserito, e successivamente export CSS, che vi permetterà di accedere alla pagina di download dell’immagine sprite e anche alle varie regole background che dovranno essere modificate all’interno dei vostri CSS.

Risultato SpriteMe

Ecco l’immagine e le modifiche CSS!

Conclusioni

Abbiamo visto come e perché tutti noi dobbiamo iniziare ad utilizzare i CSS Sprite all’interno dei nostri progetti, ma alla fine, cosa ne pensi? Secondo te è giusto che Google ritenga la velocità di caricamento di un sito web un fattore importante nel posizionamento del sito stesso sll’interno dei risultati di ricerca?

Sinceramente io sono a favore, un web veloce significa affidabilità per i nostri visitatori, ma sono proprio curioso di sapere cosa ne pensi anche tu!

Lascia il tuo Pensiero