Come inglobare un’immagine codificata in Base64 in una pagina web

Se utilizzi gli Strumenti di sviluppo dei browser più diffusi, ti sarà forse capitato di cercare l’URL di una immagine e di imbatterti invece in una stringa del tipo <img src="data:image/png;base64,iV...CYII=" />.

Si tratta di una immagine incapsulata all’interno dell’HTML della pagina, operazione che richiede la codifica in Base64 dell’immagine stessa (se non ti è mai capitato, puoi sempre utilizzare gli strumenti di sviluppo per esaminare l’immagine qui sotto).

Cos’è la codifica in Base64

La codifica Base64 è un metodo per rappresentare dati binari (file che contengono non solo caratteri di testo) in formato testuale, usando un sottoinsieme dei caratteri ASCII.

Come funziona la codifica in Base64? (teoria)

Secondo la teoria, Base64 prende gruppi di 3 byte (24 bit) dall’input e li divide in 4 gruppi da 6 bit. Dopodiché ogni gruppo da 6 bit viene convertito in decimale e quindi codificato secondo la seguente tabella:

indice	valore	indice	valore	indice	valore	indice	valore
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

Se la lunghezzza del file da convertire non è un multiplo di 3 byte, si aggiungono ai dati binari in input alla codifica uno o due sequenze di 8 zeri binari (padding dell’input).

Per convenzione, la lunghezza dell’output di una codifica in Base64 dev’essere un multiplo di 4. Se necessario, vengono aggiunti uno o due simboli = (padding dell’output).

Come funziona la codifica in Base64? (metodo pratico)

Se la lunghezza dell’input è un multiplo di 3, l’output avrà automaticamente una lunghezza multiplo di 4.

Altrimenti applicare la formula seguente (dove “modulo” significa “resto della divisione”):

x = 3 - modulo(lunghezza-input-in-byte / 3)

Il valore calcolato x può assumero il valore 1 o 2 e indica le coppie di zeri binari da aggiungere all’input della codifica (x=1 significa 00 e x=2 significa 0000) per non avere l’ultimo gruppo di bit di lunghezza inferiore a 6. Ad esempio, se si cerca di codificare un solo byte, pari a 8 bit, avremo in ingresso alla codifica un gruppo di 6 bit e un gruppo incompleto di 2 bit, a cui andranno aggiunti 4 zeri binari per ottenere il secondo gruppo di 6 bit. Se invece abbiamo in input due byte, pari a 16 bit, in ingresso alla codifica avremo due gruppi completi di 6 bit e un gruppo incompleto di 4 bit, per completare il terzo gruppo di 6 bit avremo quindi bisogno di due zeri binari). Il valore x corrisponde anche al numero di simboli = presenti nell’ouput per ottenere una lunghezza miultipla di 4, dove ogni = corrisponde ad una coppia di zeri binari aggiunti all’input. Per intenderci: se l’ouput termina con i simboli ==, significa che sono stati aggiunti 4 zeri binari all’input prima della codifica (e andranno quindi tolti prima della decodifica).

Inglobare un’immagine codificata in Base64 in una pagina web

Se si deve inglobare un’immagine in un file di testo (pagina HTML, email, file JSON, file XML, ecc.) è possibile codificarla in Base64 con il metodo sopra descritto.

Per inserire un’inmmagine codificata in Base64 in una pagina web, si usa sempre l’elemento HTML <img src="...">, con la differenza che il parametro src non specifica un URL, ma un data URI.

Formato “standard” dell’elemento HTML <img>:

<img src="/path/immagine.jpg" />

Elemento HTML <img> con data URI ed estensione base64:

<img src="data:image/png;base64,........." />

Perché inglobare un’immagine in una pagina web? Vantaggi e svantaggi

Il principale vantaggio di utilizzare un’immagine inglobata ndirettamente nell’HTML è quello di evitare una chiamata http aggiuntiva (risparmiando il tempo necessario all’accesso al server che ospita l’immagine esterna e al download).
I vantaggi maggiori si avranno perciò in pagine web con molte piccole immagini (icone, sprite sheets).

Inglobare un’immagine permette anche di superare eventuali blocchi da parte di un firewall o una policy CORS.

Gli svantaggi di questa tecnica sono:

• la dimensione in byte di una immagine codificata in Base64 è di circa un terzo superiore a quella dell’immagine in formato binario.
• l’immagine inglobata non può essere salvata nella cache del browser;
• il codice HTML risulta più difficile da leggere e da mantenere, a causa della lunga stringa di caratteri che rappresenta l’immagine inglobata.

Strumenti online

Per reperire uno strumento online per visualizzare un’immagine codificata in Base64, eseguire una ricerca su Google con la query “base64 image viewer” o la query “base64 2 image”. Si otterrà ad esempio il sito https://base64-viewer.onrender.com/.

Per reperire uno strumento online per codificare un’ ‘immagine in Base64, eseguire una ricerca su Google con la query “base64 image decoder” o la query “image 2 base64”. Si otterrà ad esempio il sito https://www.base64-image.de/.