Da immagine a Base64

Trasforma un'immagine in testo da incorporare

Convertire un'immagine in Base64 trasforma il file in una lunga stringa di testo. Puoi poi incorporarla direttamente in una pagina web o in un foglio di stile come data URI, per esempio <img src="data:image/png;base64,iVBOR...">, inserirla in un payload JSON o salvarla in un campo di testo, senza bisogno di un file immagine separato.

Carica un'immagine e copia il risultato codificato. Lo strumento restituisce solo il Base64 grezzo, quindi quando costruisci un data URI aggiungi tu il prefisso data:image/png;base64, (con il tipo di immagine corretto). È un trucco comune per piccole icone, loghi nelle firme email HTML, immagini segnaposto e risorse di demo in un solo file.

C'è un compromesso: il Base64 rende i dati circa un terzo più grandi del file originale e le immagini incorporate non possono essere memorizzate separatamente nella cache del browser. Usalo per le immagini piccole e lascia le foto grandi come file normali.

Come convertire un'immagine in Base64

1. Scegli il file immagine dal tuo dispositivo.
2. Lascia che lo strumento lo codifichi.
3. Copia il risultato in Base64.
4. Incollalo nell'attributo src dell'HTML, in url() del CSS, in un JSON o nel codice.

Esempi

Un piccolo PNG

Input: Un PNG di 69 byte, 1×1 pixel

Risultato:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mPonL4bAAOIAdw0rRDJAAAAAElFTkSuQmCC

92 caratteri di Base64, circa un terzo in più del file da 69 byte.

Usare il risultato in HTML

Risultato: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">

Aggiungi il prefisso corrispondente al tipo di file: image/png, image/jpeg, image/gif, image/webp o image/svg+xml.

Usi comuni

• Incorporare piccole icone e loghi direttamente in HTML o CSS.
• Includere immagini in demo e prototipi HTML in un solo file.
• Inviare immagini dentro un JSON a un'API che richiede Base64.
• Creare template email (alcune app di posta bloccano le immagini in data URI).
• Salvare piccole immagini in database o file di configurazione.

Consigli e cose da sapere

• Ottimizza prima l'immagine con l'ottimizzatore di immagini: un file più piccolo significa una stringa molto più corta.
• Il Base64 è ideale per immagini sotto pochi kilobyte. Le immagini più grandi si caricano più in fretta come normali file in cache.
• Gmail e alcuni altri client non mostrano le immagini in data URI nelle email. Per le immagini importanti delle email usa file ospitati online.
• Verifica il risultato incollandolo in da Base64 a immagine.

Casi particolari e limiti

• I caricamenti sono limitati dalla dimensione massima dei file del sito; oltre quel limite lo strumento mostra un errore.
• Il risultato è una sola lunga riga senza interruzioni, come richiesto dai data URI.
• I file SVG sono già testo. Per gli SVG spesso puoi saltare il Base64 e incorporare direttamente l'SVG codificato per URL, che è più corto.

Domande frequenti

Cos'è un data URI?

È un URL che contiene direttamente i dati del file, come data:image/png;base64,... I browser lo mostrano esattamente come un'immagine collegata.

Il Base64 rende le immagini più pesanti?

Sì, di circa il 33%, perché ogni 3 byte diventano 4 caratteri.

Il Base64 fa bene alle prestazioni del sito?

Per immagini minuscole può far risparmiare una richiesta HTTP. Per immagini più grandi di solito peggiora le cose, perché l'HTML o il CSS diventano più pesanti e non possono essere memorizzati separatamente in cache.

Quali formati di immagine sono supportati?

I formati web più comuni, come JPG, PNG, GIF, WebP e SVG.

Strumenti correlati

• Da Base64 a immagine: Decodifica un input Base64 in un'immagine.
• Ottimizzatore di immagini: Comprimi e ottimizza le immagini per ridurne il peso mantenendo un'alta qualità.
• Codificatore Base64: Codifica in Base64 qualsiasi stringa.
• Selettore colori: Il modo più semplice per scegliere un colore dalla ruota dei colori e ottenere il risultato in qualsiasi formato.
• Lettore EXIF: Carica un'immagine ed estrai i dati che contiene.