Codificare un'immagine in Base64 / Data URI

Una Data URI è un URL che contiene direttamente i dati di una risorsa invece di puntare a un file remoto. La sua forma generale è data:[<mediatype>][;base64],<data>. Per un'immagine, si ha tipicamente data:image/png;base64,iVBORw0KGgo…. La risorsa è incorporata nell'HTML, nel CSS o nel JSON e caricata senza alcuna richiesta HTTP aggiuntiva.

Le motivazioni comuni:

• Ridurre le richieste HTTP: integrare un'icona direttamente nel CSS invece di caricarla in aggiunta al documento
• Firma email con immagine inline: nessun rischio che l'immagine venga bloccata come contenuto remoto
• Web Components / Web Workers: dove caricare una risorsa esterna pone spesso un problema di scope o di CORS
• Storage locale (LocalStorage, IndexedDB, database): serializzare una miniatura di avatar come stringa
• Self-contained snippets: un file HTML autosufficiente, senza dipendenze esterne

Alcuni contesti concreti in cui la codifica Base64 di un'immagine si giustifica:

• Icone SVG inline in CSS (background-image: url("data:image/svg+xml;base64,…"))
• Firme email personalizzate con logo
• Prototipazione rapida di una pagina autonoma condivisa via email
• Web component autonomi (un solo file distribuibile)
• Generazione di PDF lato browser (jsPDF) con miniature incorporate
• Dati di test (mock) che contengono immagini

Tre passaggi:

1. Caricate la vostra immagine (PNG, JPG, SVG, WebP, GIF) tramite la zona di drop
2. Cliccate su «Codifica»
3. Copiate la Data URI risultante con il pulsante dedicato e incollatela nel vostro HTML, CSS o JSON

Il Base64 non è una soluzione miracolosa. Alcune precauzioni:

• Il Base64 aumenta la dimensione di circa il 33%: 4 caratteri ASCII per ogni 3 byte binari
• Le immagini codificate non sono messe in cache separatamente dal browser; vengono ricaricate con l'HTML/CSS che le contiene
• Da privilegiare per immagini sotto i 10 KB; oltre, un file esterno è generalmente più efficiente
• Per l'SVG, preferire la codifica URL (tramite encodeURIComponent) piuttosto che Base64: il risultato è più breve e resta parsabile come testo
• Tool di build moderni (Webpack, Vite) automatizzano la scelta Base64 vs. file esterno tramite una soglia di dimensione configurabile

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Qual è la differenza tra Base64 e binario?

Il binario rappresenta i byte grezzi di un file. Il Base64 è una codifica che trasforma questi byte in 64 caratteri ASCII stampabili (A-Z, a-z, 0-9, +, /). I contesti testuali (HTML, JSON, email) non possono trasportare il binario; il Base64 risolve questo problema al prezzo di un sovraccarico di dimensione del 33%.

Perché la mia Data URI è così lunga?

Un'immagine di 30 KB in binario diventa circa 40 KB in Base64. E ogni carattere è un byte ASCII, quindi sì, la stringa è lunga. È inerente alla codifica. Per immagini grandi, conservare un file esterno.

Tutti i browser supportano le Data URI?

Sì, senza eccezioni tra i browser moderni (Chrome, Firefox, Safari, Edge da IE8 in poi). Limiti storici: IE8 limitava a 32 KB. Nessun problema oggi sul web.

Come decodificare una Data URI?

Il nostro decoder di immagini Base64 fa l'operazione inversa: incollate la vostra Data URI, recuperate il file immagine (PNG, JPG, SVG, WebP) pronto da caricare o salvare.

Base64 vs. URL encoding per gli SVG?

Per l'SVG, l'URL encoding (con encodeURIComponent) produce una stringa più breve di Base64 e resta leggibile come testo. È la scelta raccomandata in CSS quando si integra un SVG inline. Per i formati binari (PNG, JPG), Base64 resta obbligatorio.

La codifica Base64 influisce sulla qualità dell'immagine?

No. La codifica è lossless: è una biiezione byte binario ↔ stringa Base64. I pixel originali sono strettamente preservati. Solo la dimensione del file trasportato aumenta del 33%.