Immagine in Base64 Codifica Guida Completa

La codifica Base64 converte i dati binari dell'immagine in una stringa di testo di 64 caratteri ASCII. Questo permette di incorporare immagini direttamente in HTML, CSS e JSON senza riferimenti a file esterni.

La tecnica è ampiamente usata per icone piccole, template email e app offline. Capire quando Base64 aiuta e quando penalizza le performance è essenziale per lo sviluppo web moderno.

Cos'è la codifica Base64

Base64 è uno schema di codifica binario-testo che rappresenta dati binari usando 64 caratteri: A–Z, a–z, 0–9, + e /. Ogni gruppo di 3 byte di dati binari corrisponde a 4 caratteri Base64. Le immagini codificate in Base64 possono essere incluse in HTML come data URI o in CSS come valori background-image.

Come funziona la codifica Base64

Il codificatore legge l'immagine come byte grezzi, li divide in gruppi di 6 bit e mappa ogni gruppo in uno dei 64 caratteri. L'output termina con = o == per rendere la lunghezza un multiplo di 4. Un file PNG da 1KB diventa circa 1.37KB di testo Base64. Il browser decodifica la stringa prima di renderizzarla.

Base64 in HTML e CSS

Un'immagine codificata in Base64 può essere usata ovunque si aspetti un URL. In HTML come src di img, in CSS come background-image, o in SVG come href. Il formato data URI è:

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." />

/* CSS */
.icon &#123;
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
&#125;

Overhead e performance

Base64 aggiunge circa il 33% di overhead rispetto al file binario originale. Un PNG da 10KB diventa ~13.3KB di Base64. Tuttavia, l'incorporamento elimina la richiesta HTTP — per file piccoli (< 5KB), questo compromesso è favorevole. Per immagini più grandi, l'overhead supera il risparmio. Inoltre, le stringhe Base64 non sono cacheable separatamente.

Quando usare immagini Base64

Usa Base64 per: icone piccole e favicon (< 5KB) incorporate nel CSS; template email dove le immagini esterne possono essere bloccate; PWA offline; file SVG con texture bitmap incorporate; payload JSON che devono includere dati immagine. Evita per: immagini > 10KB, immagini che cambiano frequentemente, immagini che beneficiano del caching CDN.

Limitazioni e alternative

Limitazioni: nessun caching del browser separato, aumento del 33%, stringhe lunghe nel codice sorgente. Alternative: CSS sprite; HTTP/2 multiplexing; SVG inline. Per le email, considera l'hosting delle immagini su CDN quando le stringhe Base64 sono troppo lunghe.

FAQ

Cos'è la codifica Base64 delle immagini? +

La codifica Base64 converte i dati binari dell'immagine in una stringa di testo stampabile usando 64 caratteri ASCII. Permette di incorporare immagini in HTML, CSS o JSON senza file separati.

Quanto è più grande un'immagine Base64? +

Base64 aggiunge circa il 33% di overhead. Un PNG da 10KB diventa circa 13.3KB di testo Base64.

Come uso un'immagine Base64 in HTML? +

Usala come data URI nell'attributo src: . Lo stesso funziona in CSS come background-image.

Base64 funziona con tutti i formati immagine? +

Sì. Il tipo MIME nel data URI specifica il formato: image/png, image/jpeg, image/gif, image/webp, image/svg+xml.

Devo usare Base64 per immagini grandi? +

No. Per immagini > 5–10KB, il 33% di overhead supera il risparmio della richiesta HTTP. Usa Base64 solo per icone piccole e placeholder.

Le immagini Base64 sono cacheable dai browser? +

Non separatamente. La stringa Base64 è parte del file HTML o CSS, quindi viene cacheed come parte di quel file.

Posso usare immagini Base64 nelle email? +

Sì. Alcuni client email bloccano le immagini esterne ma renderizzano sempre le immagini Base64 inline. Tuttavia, aumentano significativamente la dimensione dell'email.