Usare gli URL di dati nel modo corretto in HTML5 e CSS

Gli URL di dati, definiti nell'RFC 2397, sono dei particolari tipi di URL che consentono ad un browser di gestire file e risorse decodificando tali URL. In altre parole, un file o una risorsa viene codificata in Base64 nell'URL e quindi decodificata dal browser durante il parsing dell'URL. L'effetto finale, ad esempio, è quello di vedere un'immagine resa nel browser come se si fosse aperto il file di tale immagine. Proprio le immagini saranno il tema di questo articolo, in cui vedremo come usare gli URL di dati per gestire le immagini.

Schema degli URL di dati

Lo schema degli URL di dati è il seguente:

data:[<mediatype>][;base64],<data>

data: instruisce il browser sul fatto che si sta usando un URL di dati, mediatype specifica il tipo di contenuto del file (per esempio image/png) mentre base64 serve a marcare l'inizio della sequenza di caratteri della codifica Base64.

Un esempio preso dalle specifiche:

<IMG
   SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
   AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
   ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
   a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
   ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
   F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
   hhx4dbgYKAAA7"
   ALT="Larry">

Per testare un URL di dati è sufficiente che voi copiate ed incollate nella barra degli indirizzi del browser l'intero URL e quindi premiate Invio. Vedrete così come il browser rappresenta la risorsa decodificandola.

Utilizzo corretto degli URL di dati

Gli URL di dati possono essere utilizzati in questi contesti:

1. Link e immagini HTML
2. Proprietà CSS background-image e content (con url())

In generale, si dovrebbero usare gli URL di dati solo per immagini di piccole dimensioni. Esistono infatti dei limiti precisi nelle dimensioni dei file accettati dai browser come URL di dati.

Non si dovrebbero utilizzare gli URL di dati per immagini di grandi dimensioni al fine di offuscarne il percorso. Gli URL di dati generati dinamicamente su questo tipo di risorse sono molto dispendiosi in termini di performance, sia lato client che lato server.