Includere immagini inline in un documento html : i Data URLs

Pubblicato il -
Questo articolo potrebbe contenere link di affiliazione, ovvero link a pagine in cui, se viene effettuato un'acquisto, potrebbero generare una commissione a settorezero ma comunque senza incidere sul costo finale dell'oggetto acquistato. E' un modo per non avere pubblicità invasiva (che, se non avete notato, abbiamo rimosso) e nel contempo garantire al sito di continuare ad esistere.

Supponiamo di dover realizzare un’applicazione web che deve girare su un picmicro, su Arduino o su una MCU qualsiasi. Fino a che bisogna mostrare solo del testo opportunamente formattato, i problemi non ci sono: la pagina viene memorizzata come testo, ovvero come una semplice sequenza di bytes, nella stessa ROM della vostra MCU, in un’eeprom esterna o qualche altro dispositivo di memorizzazione.

Mettiamo ora il caso di voler rendere la nostra pagina più accattivante e quindi di voler aggiungere delle immagini. Se la nostra applicazione è integrata in una rete potremmo utilizzare semplicemente il tag <img> per fargli caricare un’immagine da una cartella condivisa. Ma supponiamo che la nostra applicazione sia stand-alone o che non vogliamo ricorrere all’utilizzo di risorse condivise. La soluzione è includere l’immagine inline all’interno del documento stesso, come sequenza di bytes. Questo è quello che viene chiamato Data URL.

I Data URL prevedono in pratica di includere delle risorse (non solo immagini) all’interno del documento html stesso come se fossero risorse esterne, ma in realtà sono parte integrante della pagina. I Data URL sono regolati dalla RFC2397 alla quale rimando per ulteriori informazioni. C’è però da dire che non tutti i browser supportano i Data URL, ma il problema dovrebbe esistere solo per browser molto vecchi e per Internet Explorer fino alla versione 7.

Facciamo subito un esempio pratico. Voglio includere nella mia pagina il mostriciattolo che ora uso come logo di settorezero:

Normalmente, quando si include un’immagine in un documento html si utilizza il tag <img> in questa forma:

<img src="https://www.settorezero.com/blablabla/immagine.jpg" alt="logo" width="90" height="90" />

Il tag così scritto prevede che l’immagine venga caricata da una risorsa esterna, da un sito web in questo caso. Nella mia applicazione non posso fare una cosa del genere (perchè non ho l’accesso ad internet, perchè non ho risorse condivise, perchè voglio limitare il numero di chiamate verso l’esterno o altri motivi più o meno validi). Utilizzo quindi un Data URL e il mio tag <img> assume questa forma:

<img src="data:image/png;base64,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" alt="logo" width="90" height="90" />

Il file binario viene in pratica codificato in Base64. Per farla breve la codifica in Base64 permette di rappresentare un file binario in formato ASCII.

Il vantaggio di questo sistema è che l’immagine è inclusa nella pagina stessa: non bisogna fare chiamate esterne. Lo svantaggio è che il file codificato in Base64 ha una grandezza superiore (fino al 33%) rispetto al file binario, per cui questo sistema andrebbe utilizzato con immagini molto piccole e qualora lo spazio a disposizione sia limitato.

Per codificare un’immagine con questo sistema potete utilizzare questo servizio gratuito:

http://www.sveinbjorn.org/dataurlmaker

Altre informazioni utili sono presenti in questo articolo.

Se questo articolo ti è piaciuto, condividilo su un social:
      
Se l'articolo ti è piaciuto o ti è stato utile, potresti dedicare un minuto a leggere questa pagina, dove ho elencato alcune cose che potrebbero farmi contento? Grazie :)