Codifica
Data URI / Immagine Base64
Codifica di un'immagine in Data URI (data:image/…;base64,…) da inserire in CSS/HTML, e decodifica di un Data URI o Base64 grezzo in un file — tutto direttamente nel browser.
L'anteprima dell'immagine apparirà qui.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
Articolo su questo strumento: Data URI: quando incorporare immagini direttamente nel codice
Domande frequenti
Quando dovrei usare un Data URI invece di un normale file immagine?
I Data URI sono utili per immagini piccole e usate spesso, come icone o loghi, quando vuoi evitare una richiesta HTTP extra, ad esempio incorporando un'immagine direttamente in CSS o HTML inline.
Ci sono svantaggi nell'usare i Data URI per le immagini?
Sì. Aumentano la dimensione del file (circa il 33% in più rispetto all'immagine originale a causa di Base64), non vengono memorizzati in cache separatamente come un vero URL immagine, e molti browser e client email impongono limiti pratici di dimensione.
Questo strumento carica la mia immagine da qualche parte?
No. L'immagine viene letta e codificata interamente nel tuo browser — non viene mai inviata a un server.
Si può usare un Data URI per SVG senza Base64?
Sì. SVG è testo (XML), quindi invece di Base64 basta il percent-encoding dei caratteri speciali: data:image/svg+xml,%3Csvg...%3E. Questa soluzione è più compatta e resta modificabile direttamente in un file CSS.
Si può inserire un Data URI in un attributo href o in background-image?
Sì, il Data URI funziona ovunque sia previsto un riferimento a una risorsa — in src, href, background-image nel CSS e persino in @import. La sintassi e i limiti di dimensione sono gli stessi validi per il tag img.