Convertitore da immagine a Base64

Cosa fa

Questo strumento trasforma un’immagine in testo Base64 e in un data URI pronto da incollare. Un data URI incorpora l’immagine direttamente in HTML, CSS, Markdown, JSON o in un’email, così la pagina fa una richiesta HTTP in meno e lo snippet funziona senza ospitare un file separato. Funziona anche al contrario: incolla Base64 o un data URI per vedere l’anteprima dell’immagine e scaricarla.

Come si usa

1. Trascina un’immagine nell’area di rilascio, premi Scegli immagine oppure premi Esempio per caricare un logo SVG.
2. L’anteprima mostra l’immagine con tipo, dimensione del file, dimensione Base64 e dimensioni in pixel.
3. Scegli un formato di Output:
   • Data URI: data:image/png;base64,…, per attributi src e JSON.
   • Solo Base64: la stringa nuda, con a capo facoltativo ogni 76 caratteri per l’uso in stile MIME e PEM.
   • Sfondo CSS: una dichiarazione background-image: url("…"); completa.
   • HTML <img>: un tag immagine con il data URI come src.
   • Markdown: ![image](data:…).
4. Copia il risultato. Per decodificare, incolla Base64 o un data URI nel riquadro di input e premi Scarica immagine.

Esempio

Un PNG di 2×1 pixel diventa:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

Usato in CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Quando incorporare le immagini

Incorporare le immagini aiuta con immagini piccole e usate spesso, come icone, piccoli sfondi, spinner di caricamento e firme email. Non è adatto a foto e grafiche grandi: il Base64 aumenta la dimensione di circa un terzo, l’immagine non può essere memorizzata in cache separatamente dalla pagina o dal foglio di stile e ritarda l’analisi del resto del file. Come regola pratica, tieni le immagini incorporate sotto qualche kilobyte. Per gli SVG, un data URI con percent-encoding (data:image/svg+xml,…) è spesso più piccolo del Base64, e lo strumento accetta entrambi.