Cos'è il Base64?
Il Base64 è un sistema di codifica che trasforma dati binari — come i byte che compongono un'immagine — in una sequenza di caratteri di testo puro. Il nome deriva dal fatto che il sistema usa 64 caratteri distinti (lettere maiuscole, minuscole, numeri, + e /) per rappresentare qualsiasi tipo di dato.
In pratica, questo significa che qualsiasi file immagine può essere convertito in una lunga stringa di testo come questa:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4
BCVMAAAAJRQAAAAElFTkSuQmCCQuesto formato è chiamato Data URI (o data URL). Invece di puntare a un file esterno, l'URL contiene il contenuto stesso dell'immagine codificato in testo. Il browser legge questa stringa e renderizza l'immagine direttamente, senza alcuna richiesta HTTP aggiuntiva.
Come funziona la struttura di un Data URI
Ogni Data URI di immagine segue lo stesso schema:
data:[tipo MIME];base64,[dati codificati]I componenti sono:
- data: — prefisso fisso che identifica lo schema
- [tipo MIME] — il formato dell'immagine, come
image/png,image/jpeg,image/svg+xmloimage/gif - ;base64, — indica che il contenuto è codificato in Base64
- [dati codificati] — la lunga stringa con il contenuto binario dell'immagine convertito in testo
È importante notare che la codifica Base64 aumenta la dimensione dei dati di circa il 33%. Un'immagine di 3 KB diventa una stringa di circa 4 KB. Questo costo esiste perché il sistema ha bisogno di più caratteri per rappresentare gli stessi byte.
Come usare il Base64 in HTML
Per mostrare un'immagine Base64 direttamente in HTML, basta inserire il Data URI nell'attributo src del tag <img>:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Icona">Il browser tratta questo elemento esattamente come un'immagine normale. Puoi applicare CSS, definire larghezza, altezza e usarla in qualsiasi contesto in cui un <img> sarebbe accettato.
Come usare il Base64 in CSS
In CSS, il Data URI viene usato principalmente nelle proprietà di immagine di sfondo:
.icona {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucy...");
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}Questa tecnica è particolarmente comune per le piccole icone SVG che devono essere colorate dinamicamente via CSS, oppure per immagini di sfondo che fanno parte di componenti riutilizzabili in librerie.
💡 Consiglio per SVG: i file SVG possono essere incorporati come Base64 oppure come SVG inline direttamente nell'HTML — senza codifica. L'SVG inline tende a essere più leggibile e facile da manipolare con CSS e JavaScript, mentre il Base64 è preferibile quando l'SVG si trova in un file CSS esterno.
Quando usare il Base64 — e quando evitarlo
La decisione tra usare il Base64 o un file esterno dipende principalmente dalla dimensione dell'immagine e dal contesto d'uso. La tabella seguente riassume gli scenari più comuni:
| Situazione | Raccomandazione | Motivo |
|---|---|---|
| Icone e sprite piccoli (< 2 KB) | ✅ Base64 consigliato | Elimina la richiesta HTTP senza impatto percepibile sul peso |
| Favicon incorporati in CSS | ✅ Base64 consigliato | Pratico e senza dipendenza da file esterni |
| Placeholder e skeleton di caricamento | ✅ Base64 consigliato | Si carica istantaneamente con l'HTML, senza flash di contenuto |
| E-mail HTML | ✅ Base64 consigliato | Molti client e-mail bloccano le immagini esterne |
| Immagini di contenuto (foto, banner) | ❌ Evitare | Aumenta il peso dell'HTML e impedisce la cache del browser |
| Immagini sopra i 5 KB | ❌ Evitare | La penalità di dimensione (+33%) compromette il caricamento |
| Immagini riutilizzate in più pagine | ❌ Evitare | Il file esterno viene messo in cache; il Base64 viene scaricato di nuovo a ogni pagina |
Vantaggi del Base64 per le immagini
Quando usato nel contesto giusto, il Base64 porta benefici reali:
- Zero richieste HTTP aggiuntive — l'immagine è incorporata nell'HTML o nel CSS stesso, il che riduce la latenza di caricamento per le immagini critiche sopra la piega.
- Funzionamento offline e nelle e-mail — non dipendendo da un server esterno, l'immagine viene mostrata anche senza connessione (in app offline) o in client e-mail che bloccano i contenuti esterni.
- Portabilità totale — un unico file HTML con immagini in Base64 può essere inviato o archiviato senza perdere alcun riferimento visivo.
- Caricamento atomico — l'immagine appare esattamente quando l'elemento HTML viene renderizzato, senza ritardo aggiuntivo, ideale per evitare il flash di layout nelle icone dell'interfaccia.
Svantaggi e limitazioni
Il Base64 ha anche costi che vanno valutati con attenzione:
- Dimensione 33% maggiore — la conversione in testo aumenta invariabilmente il volume di dati trasferiti. Per immagini grandi, questo rappresenta kilobyte extra senza alcun beneficio.
- Nessuna cache del browser — le immagini in file esterni vengono memorizzate nella cache del browser e riutilizzate tra le pagine. Il Base64 incorporato nell'HTML viene scaricato di nuovo a ogni visita, perché è legato al documento.
- Rende più difficile la manutenzione — sostituire un'immagine nel codice richiede di riconvertire il file e incollare una nuova stringa lunga nell'HTML o nel CSS, il che è laborioso e soggetto a errori.
- Peggiora la leggibilità del codice — le lunghe stringhe Base64 dentro il CSS o l'HTML rendono il file difficile da leggere e revisionare.
- Non è comprimibile in modo efficiente con gzip — gzip e Brotli comprimono bene il testo ripetitivo, ma le stringhe Base64 hanno un'entropia elevata e non beneficiano molto della compressione, a differenza di un file immagine binario.
⚠️ Regola pratica: usa il Base64 solo per immagini sotto i 2 KB. Per tutto il resto, un file esterno ottimizzato — specialmente in formato WebP o AVIF — è la scelta più efficiente per le prestazioni del sito.
Base64 e prestazioni del sito (PageSpeed)
L'impatto del Base64 sulle prestazioni dipende direttamente da cosa viene codificato. Per le icone piccole, l'eliminazione di una richiesta HTTP può migliorare il Time to First Byte percepito e ridurre il numero di connessioni parallele necessarie. Questo può riflettersi positivamente sulle metriche del Core Web Vitals, in particolare l'LCP (Largest Contentful Paint), quando l'elemento principale della pagina è un'icona incorporata.
D'altra parte, incorporare immagini grandi in Base64 aumenta direttamente il peso del documento HTML, ritardando l'inizio del rendering. Google PageSpeed Insights tende a penalizzare le pagine con HTML eccessivamente pesante. Per foto e banner, la strada giusta è sempre un file esterno ottimizzato.
Se hai bisogno di ottimizzare le immagini per il web, il primo passo è comprimerle e convertirle nel formato più efficiente. Lo strumento Compressore di Immagini di ImageTools lo fa direttamente nel browser, senza inviare i tuoi file a nessun server.
Come convertire un'immagine in Base64
Esistono diversi modi per generare una stringa Base64 a partire da un'immagine:
- Strumenti online — il modo più veloce per un uso occasionale. ImageTools offre lo strumento Immagine in Base64, che converte qualsiasi immagine nel browser e fornisce il codice pronto da copiare.
- Terminale (Linux/macOS) — il comando
base64 immagine.pnggenera la stringa codificata. Per generare il Data URI completo:echo "data:image/png;base64,$(base64 -w 0 immagine.png)". - JavaScript nel browser — usando l'API
FileReaderè possibile convertire in modo asincrono qualsiasi file selezionato dall'utente in Base64. - Webpack e bundler — strumenti come Webpack, Vite e Rollup hanno plugin che convertono automaticamente i file piccoli in Base64 inline durante la build, seguendo una soglia di dimensione configurabile.
Converti l'immagine in Base64 ora
Carica la tua immagine e ottieni il Data URI completo, pronto da usare in HTML o CSS. Elaborazione 100% nel browser.
Apri lo strumento Base64 →Domande frequenti
Cos'è il Base64 per le immagini?
Il Base64 è un modo per codificare dati binari (come le immagini) in testo ASCII. Invece di caricare il file immagine separatamente, il contenuto viene convertito in una lunga stringa di caratteri che può essere incorporata direttamente nell'HTML o nel CSS, formando un Data URI.
Convertire un'immagine in Base64 peggiora le prestazioni del sito?
Dipende dall'uso. Per immagini piccole (icone, favicon, placeholder), il Base64 può migliorare le prestazioni eliminando una richiesta HTTP. Per immagini grandi, aumenta il peso della pagina e impedisce la cache del browser, peggiorando le prestazioni.
Qual è la dimensione massima consigliata per usare il Base64?
La regola pratica è usare il Base64 solo per immagini sotto i 2 KB. Oltre questa soglia, l'aumento di dimensione generato dalla codifica (circa il 33% in più) e la perdita della cache rendono il file esterno l'opzione più efficiente.
Il Base64 funziona su tutti i browser?
Sì. Il formato Data URI con Base64 è supportato da tutti i browser moderni, inclusi Chrome, Firefox, Safari, Edge e i loro equivalenti mobile. I browser molto datati come IE6 non lo supportano, ma oggi non è una preoccupazione pratica.
Come convertire un'immagine in Base64 online?
Puoi usare lo strumento Immagine in Base64 di ImageTools. Basta caricare l'immagine e lo strumento genera automaticamente la stringa Base64 e il codice Data URI pronto da usare in HTML o CSS.