L’ottimizzazione di un sito web spazia trasversalmente dalla banale ottimizzazione delle immagini alle più spinte configurazioni lato server. Per questa ragione non basta un semplice post per coprire in modo sufficiente un argomento così vasto ed articolato.

Per cominciare diamo per scontato che si conoscano gli accorgimenti base per l’ottimizzazione di un sito web e si voglia andare oltre adottando strategie più aggressive e sicuramente meno conosciute tra cui l’oggetto di questo post: lo schema URI ‘data:‘

Si tratta di una tecnologia introdotta nell’ormai lontano 1998 e ancora ora poco usata che si rivela molto utile nell’inclusione delle immagini all’interno di una pagina web.

Che cosa fa?
Lo schema data: permette di includere il contenuto delle immagini direttamente all’interno delle pagine web sotto forma di testo. Un tipico tag html come questo:

<img src="mia_immagine.jpg" alt="La mia bellissima immagine JPEG" />

diventa quindi qualcosa di leggermente più complicato come:

<img src="data:image/jpeg;charset=utf-8;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="La mia bellissima immagine JPEG" />

Dove ‘data:’ indica al browser che stiamo per includere dei dati direttamente dentro il tag, ‘image/jpeg‘ indica il tipo di contenuto che stiamo per inserire (in questo caso una jpeg) secondo la convenzione MIME, ‘charset=‘ indica quale set di caratteri stiamo usando mentre ‘base64‘ indica il tipo di codifica utilizzata per rappresentare i dati inclusi.

Quali i vantaggi e quali gli svantaggi?
L’idea di introdurre i dati che compongono le immagini direttamente dentro i tag può sembrare un controsenso quando parliamo di ottimizzare una pagina web per spremere fino all’ultimo byte. Tuttavia questa tecnica porta con sè un grosso vantaggio: includere le immagini con questa tecnica permette di non dover richiamare le immagini esterne tramite richieste HTTP riducendo di fatto il numero di richieste totali necessarie al caricamento della vostra pagina web.

Uno dei fattori critici nella velocità di caricamento di una pagina web è rappresentato dal numero di oggetti in essa inclusi. Più oggetti significano più richieste. Più richieste significano tempo di attesa per il vostro visitatore considerando anche che molti browser moderni limitano le connessioni concorrenti dallo stesso host a 2. A fronte di un aumento di dimensione del codice sorgente della vostra pagina otterrete quindi un evidente diminuizione del numero di richieste HTTP e conseguente aumento di velocità di caricamento della pagina.

Implementazione pratica
Ovviamente pensare di includere manualmente il contenuto di un’immagine dentro l’HTML è impensabile. Per questo motivo ci viene in aiuto PHP:

<?php
// Funzione di esempio presa da http://en.wikipedia.org/wiki/Data_URI_scheme
function data_url($file, $mime) {
  $contenuto = file_get_contents($file);
  $base64   = base64_encode($contenuto);
  return ('data:' . $mime . ';base64,' . $base64);
}
?>
<!-- Esempio di inclusione immagine usando la funzione data_url() -->
<img src="<?php echo data_url('elephant.png','image/png'); ?>" alt="Elefanto!" />

Con questa semplice funzione sarà possibile usare lo schema data: in modo semplice senza intaccare la leggibilità del codice (almeno lato sorgente ).

Fonti:
http://en.wikipedia.org/wiki/Data_URI_scheme
http://tools.ietf.org/html/rfc2397