📁
Forum per Webmaster
Glossario

CSS Sprite

Combine images using CSS sprites

L’uso del CSS Sprite nelle tecniche usate per velocizzare un sito internet sta divenendo una “leggenda metropolitana” tra i webmaster, ragion per cui facciamo un po’ di chiarezza in modo da sfatare dicerie provenienti anche da fonti autorevoli ma non per questo immuni dal divulgare informazioni palesemente contestabili da chi esperto nel settore.

Che cos’è in CSS Sprite

Combine images using CSS sprites

Il CSS Sprite non è nient’altra che una tecnica che prende spunto dalle quelle adottate nella programmazione durante la prima era informatica, l’era dei primi home computer con processore a 8 e 16 bit, come il C64 e il Commodore Amiga.
La tecnica consisteva nel inserire in una sola e grande immagine che raffigurava tante immagini più piccole e di uguali dimensioni. Con tale tecnica era possibile per esempio, in un una immagine di 64 X 64 pixel, innestare 16 immagini di 16 X 16 pixel disponendole su 4 file dove su ogni fila vi erano 4 immagini.
Questa pratica – che in fondo è un bricolage –, veniva comoda perché permetteva un’ottimizzazione delle limitatissime risorse dei computer di allora, in particolare si ottimizzavano memoria e velocità, ragion per cui l’impiego di questa tecnica non solo abbracciava l’utilizzo di piccole immagini animate create dall’alternarsi in sequenza delle singole immaginette dette frame, ma veniva utilizzata anche per la creazione di set di caratteri personalizzati, e diedero alla luce i primi font multicolore ed altre chicche che all’epoca resero i primi computer meno grigi e cupi di quanto lo fossero e permisero un uso ludico del calcolatore che fosse realmente avvincente per il giocatore d’allora. I primi videogiochi classificabili come “platform”, fanno largo uso di immagini bitmap gestite con questa tecnica.
Il CSS Sprite, usato nel web, è una tecnica che prendendo spunto da quanto avveniva nell’ambito della programmazione dei primi personal computer e in molti casi avviene tuttora, è una tecnica che consiste nel creare una “grande” immagine nella quale vi siano contenute tutte le “piccole” immagini che appaiono nella pagina web. In questo modo, il browser, non dovrà richiamare e leggersi una a una tutte le immagini, ma ne legge una sola che poi il CSS – con le sue regole – penserà a dividere e a posizionare correttamente nella pagina.
Il vantaggio di usare questa tecnica è dato dal fatto di diminuire il numero di request del browser al server, il che si traduce in minori comunicazioni http e minor traffico.
Nel coso per esempio che in una pagina web vi siano 4 immagini, usando la tecnica del CSS Sprite le si potrebbero accorpare in una sola immagine (fisicamente il webmaster che crea il sito web, potrebbe utilizzare anche Photoshop per accorparle), in tal modo il browser quando dovrà caricare la pagina, caricherà una sola immagine anziché quattro evitando di effettuare 4 volte la chiamata http request.
Tutto bellissimo ed efficace se non fosse altro che tutto ciò si tramuta inevitabilmente in un accrocchio di dubbia utilità e che porta ai seguenti risultati:
Il bricolage di immagini che si ottiene è di dimensione paragonabile a quella complessiva delle immagini che lo compongono, il traffico generato nella migliore delle ipotesi è identico, mente ad andare male, tale tecnica può rivelarsi peggiorativa: Il caso più classico è quello di un sito web, che usa il CSS Sprite per la raffigurazione delle emoticons. Nel caso che nella pagina web visualizzata dal browser non appaiano tutte le icone contenute nel set creato con lo Sprite (ovvero praticamente sempre), si ha una trasmissione di dati che eccede quella utile. Che senso ha organizzare un set di icone in uno Sprite quando poi a video magari appare solo uno smile?
Altre a quanto occorre tener presente che qualsiasi browser parallelamente avvia in simultanea il caricamento di più immagini, la tecnica dell’uso degli Sprite non ha assolutamente senso in tutti quei casi – e sono la maggioranza – in cui l’uso delle immagini è limitato a poche unità, e per tutti gli altri casi un incremento sostanziale dell’accelerazione del caricamento della pagina si ottiene prevalentemente dove il server ha dei tempi di latenza lunghi, tra l’arrivo di una request e l’inizio di trasmissione dei dati al client. Nei casi in cui il server ha tempi di reazione rapidi, non si hanno miglioramenti tali da giustificarne l’utilizzo, e comunque sarebbe molto più produttivo investire sul miglioramento dei tempi di latenza lato server che perdere tempo nell’implementare una tecnica che è discutibile sotto diversi fronti tra cui:
Il CSS Sprite, per funzionare, oltre a generare comunque un traffico dati per le immagini che più o meno rimane invariato, necessita anche di opportune istruzione in formato CSS o in JavaScript, tali istruzioni se inserite nel sorgente della pagina abbruttiscono il codice seguendo una tendenza che era propria della prima era dell’html e che ora non è più in uso nelle tecniche moderne e nella realizzazione di siti Xhtml, se invece in CSS è esterno e non viene accorpato con altri CSS o script (cosa difficile da farsi, per questioni di praticità) provocano comunque traffico e innescano i meccanismi di http request e response tanto quanto un’immagine da caricarsi.
L’aspetto più penalizzante per chi fa uso di tale tecnica, è rappresentato da una serie di svantaggi nel settore SEO, in primis le immagini essendo accorpate non possono godere degli specifici descrittivi EXIF per i commenti del titolo, descrizione e categoria e non possono essere gestite dagli spider dei motori di ricerca che non le riescono ad individuare come singola entità per poi catalogarle correttamente.
Nel caso di immagini animate, per esempio le GIF o PNG animate, il risultato sarebbe quello di una immagine che diventa immobile e visto che quella dei CSS Sprite è una tecnica che si presta prevalentemente all’impiego delle iconcine (le emoticons), tale tecnica si andrebbe a contraddire da sola in quell’unico campo in cui è intuitivo il suo utilizzo.
Un altro aspetto da mettere in primo piano per quanto riguarda l’adozione del CSS Sprite, è la considerazione che il navigatore quando visita un sito potrebbe benissimo – e in genere è così – visitare più pagine, in tal caso la tecnica classica sull’utilizzo delle immagini da migliori risultati, basti per esempio pensare al logo che tutti i siti hanno in alto a sinistra nelle pagine e che è il “marchio” di ogni sito: Quando un visitatore accede al sito, essendo questo logo un elemento statico (come in genere tutte le immagini), il browser lo memorizza nella cache (la tecnica giusta per chi sviluppa il sito è di far memorizzare i contenuti statici nella cache del browser con una scadenza molto lunga), e  continuando a navigare tra le pagine del sito, il browser non richiederà più al server l’immagine del logo in quanto la ha in cache, cosa che non potrebbe accadere se l’immagine del logo del sito fosse stata in realtà accorpata con altre. Lo stesso vale per le icone, che il browser memorizza e qualora in successive pagine dovessero ripresentarsi, le ripesca dalla cache senza più chiederle al server, ciò significa che l’utilizzo del CSS Sprite è assolutamente inefficace perché vanifica la cache del browser, a meno che di non creare un mega Sprite con dentro l’intero set di icone che in tal caso però andrebbe a vanificare la velocità di caricamento della prima pagina vista dall’utente perché sovraccarica anche di contenuti non visualizzati, come per esempio le emoticons o gadget che non necessariamente debbano apparire tutti assieme in ogni pagina.

Argomenti nella stessa categoria