Data uri scheme e base 64 nei fogli di stile e nell'html

Qualche tempo fa pubblicai un articolo su Italian Web Design dove veniva spiegato come validare il codice css incluso in Lightbox 2.0, la problematica era semplice, il codice css funziona ma presenta un errore nel css che viene riportato dal validatore w3c.

L’errore è dovuto ad un non corretto utilizzo del Data Uri Scheme in Base64.

background-image: url(data:image/gif;base64,AAAA);

La seguente proprietà andrebbe infatti scritta così:

background-image: url('data:image/gif;base64,AAAA');

Il seguente codice viene infatti validato senza problemi, la domanda che ci si potrebbe porre è perchè utilizzare questo metodo per inserire un’immagine di background?

Molto semplice, il Data Uri Scheme altro non è che uno schema di stringhe che definiscono una risorsa, in questo caso per esempio non abbiamo un URI tradizionale che richiede al server un’immagine, bensì abbiamo una stringa convertita in Base64 (che è l’encoding) interpretabile dal browser come immagine.

Al momento il Data Uri Scheme è supportato da tutti i browser basati su Gecko (firefox e derivati), Opera, Safari ed Internet Explorer 8 che però limita il peso della stringa a 32 kb.

Questa tecnica è molto appetibile per ridurre le chiamate al server ed applicabile nel css quanto nell’html.

Utilizzando la precedente stringa nell’url di un’immagine si può procede in questo modo:

<img src="data:image/gif;base64,AAAA" alt="Testo alternativo" />

La stringa in questione risulta vuota, esistono molti tool online che consentono di convertire un’immagine in una stringa in base64, un esempio reale di immagine convertita in base 64 è visibile a questo link.

Guardando il codice la stringa risulta molto lunga essendo un jpg complesso, di norma è consigliabile utilizzare questa tecnica in alternativa ad un’immagine nel caso di un tracking con javascript, per esempio per gestire le API di Google o per monitorare lo stato di una newsletter inviata agli utenti.

Per maggiori informazioni in merito consiglio questo articolo dedicato all’utilizzo del Data Uri Scheme nei fogli di stile.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli e contrassegnata con , . Contrassegna il permalink.

2 risposte a Data uri scheme e base 64 nei fogli di stile e nell'html

  1. Luglio7 scrive:

    Non mi piace, sono un mezzo fanatico del codice html e non mi va di sporcarlo con queste stringhe :)

    Più che altro credo che il processo di sviluppo di un layout rallenterebbe utilizzando questa ottimizzazione di conseguenza la reputo più un passo indietro che uno in avanti.

    Ad ogni modo non ero a conoscenza di questa metodologia, le porgo quindi i miei ringraziamenti :) :)

    • Mauro Accornero scrive:

      In effetti come metodo non è il massimo per mantenere un codice di markup pulito, diciamo che è una soluzione nata per evitare una chiamata in più al server e andrebbe utilizzata solo quando necessario, è possibile utilizzarla in html e css ma il suo scopo originale è riservato a contesti più specifici. Anche perchè oltre alla pulizia del codice temo che anche l’indicizzazione ne risentirebbe nonostante la pagina risulti comunque validabile. Sinceramente ho scoperto questa possibilità meno di un anno fa e l’ho vista applicata solo in due contesti (di cui uno è lightbox) credo sia utile conoscerla ma concordo con te che l’utilizzo è molto limitato. Sull’argomento consiglio questo articolo uscito da poco su jblog che parla delle ottimizzazioni sulle richieste al server e parla in maniera approfondita anche di questa soluzione.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>