CSS Sprites (anche su questo blog).

CSS SpritesNell’ottica di limare sempre più i tempi di caricamento, da alcune settimane molte delle immagini presenti su queste pagine vengono visualizzate attraverso la tecnica dei CSS Sprites. Per farvi capire meglio di cosa si tratta, prendiamo in considerazione l’immagine a lato.

La colonna di sinistra riporta in un’unica immagine tutti gli elementi grafici che compongono le pagine di questo blog. Per visualizzare uno di quegli elementi basta richiamare via CSS l’immagine intera indicando le coordinate (offset orizzontale e verticale) dell’area dell’immagine da mostrare. Nell’esempio ho fatto scorrere l’immagine di 146 pixel prima di visualizzarla in un’area alta 15 pixel per far apparire l’antipixel relativo a Technorati. Tutto il resto, essendo al di fuori di quell’area è come se rimanesse “sotto il vestito”.

.sprite-technorati {
background:#fff url(csssprite.png) no-repeat top left;
background-position:0 -146px;
}

Qual è il vantaggio dovuto all’uso dei CSS Sprites?

  • Riunendo in un’unica immagine tutti gli elementi la dimensione totale (in kb) sarà inferiore a quella della somma del peso di ogni immagine (in quanto le intestazioni del formato JPG non sono ripetute n-volte).
  • Il browser di un visitatore non dovrà effettuare n-richieste HTTP per ottenere tutte le immagini: basterà un’unica richiesta per ricevere tutti gli elementi che incontrerà nella pagina. Effettuato il primo download tutte le altre volte che dovrà mostrare quel file si accorgerà di averlo già scaricato (csssprite.png sarà in cache) e potrà visualizzarlo immediatamente facendo slittare l’immagine in base a quanto indicato via CSS.

Questo comporta un vantaggio sia per l’utente che navigherà sul sito più velocemente che per il gestore del sito web infatti minori richieste HTTP comportano un carico minore sul server che potrà, in questo modo, fronteggiare contemporaneamente alle richieste d’accesso di un numero maggiore di visitatori.

Inoltre sono sempre più convinto (ma dovrebbe essere prassi comune) che un “contenitoreleggero e scattante permette di destinare quei kb risparmiati ai contenuti (ad esempio le foto in un post). E’ come un ciclista che non usando una bicicletta di ferro può sfruttare quel peso per trasportare litri di acqua in più. 🙂

Quando non conviene usare i CSS Sprites?

  • Come al solito ogni scelta tecnica che si intraprende va valutata in base alle situazioni. In linea di massima comunque non conviene quando si prevede che esistano pagine con un livello di traffico non indifferente che visualizzano meno del 50% degli elementi grafici inseriti nel nostro sprite.

La tecnica è talmente importante per l’ottimizzazione di un sito che anche colossi come Google o Facebook la sfruttano nelle loro pagine da anni (senza che ve ne siate mai accorti).

Emanuele

4 commenti » Scrivi un commento

  1. Io li uso ma con parsimonia, perché disattivando i fogli di stile diventa tutto un casino 🙂 o almeno questo è il rischio, se non usati correttamente…

    • Ma chi naviga senza parser css attivo? Personalmente mi sembra un problema trascurabile: è come non pubblicare immagini complesse perché può arrivare qualcuno col monitor a fosfori verdi… hai statistiche a riguardo?
      Ciao,
      Emanuele

  2. Beh non ho statistiche ma lo sai che sono un talebano dell’accessibilità 🙂 Comunque è una tecnica, ripeto, che se usata opportunamente, fornisce tangibili benefici. Consiglio di associarla a domini cookieless e uso di header per l’expire per massimizzare il guadagno…

    • Quello è già tutto implementato… riguardo i browser senza CSS, l’unico rischio è chi arriva con IE6 o minori, ma ormai si tratta di percentuali che mi permetto di voler ignorare volutamente. Altrimenti dovrei supportare, per retrocompatibilità, anche i monitor da 13″ di un tempo.
      Ciao,
      Emanuele

Lascia un commento

I campi richiesti sono marcati con *.


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.