Convertitore da immagine a Base64

Come convertire un’immagine in Base64

1. In Immagine → Base64, trascina un’immagine nell’area di caricamento oppure cliccaci sopra per sceglierla (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
2. Scegli il Formato di uscita: Data URI (data:image/png;base64,…), Solo Base64, CSS background-image oppure Tag HTML , che riporta anche la larghezza e l’altezza dell’immagine.
3. Clicca su Copia, oppure su Scarica come .txt per i risultati lunghi.

La riga sotto l’area di caricamento indica il formato reale (letto dai byte del file, non dal nome), le dimensioni, il peso del file e la lunghezza del data URI.

Come riconvertire il Base64 in immagine

1. In Base64 → immagine, incolla il testo in Testo Base64 o data URI. Puoi incollare una semplice stringa Base64, un data URI completo o anche un’intera regola CSS o un tag <img>: il data URI viene trovato al suo interno. Gli a capo e gli spazi vengono ignorati, e funziona anche il Base64 «URL-safe» (con - e _).
2. Clicca su Decodifica immagine. Compaiono l’anteprima, il tipo, le dimensioni e il peso.
3. Clicca su Scarica immagine per salvarla con l’estensione corretta.

Il tipo viene verificato tramite i «magic bytes» del file, la firma all’inizio di ogni formato immagine (per esempio 89 50 4E 47 per il PNG o FF D8 FF per il JPEG). Se un data URI dichiara di essere image/jpeg ma contiene un PNG, lo strumento te lo segnala e usa il tipo reale. Tutto ciò che non è un’immagine riconosciuta viene rifiutato, e il limite è di 20 MB di dati immagine.

Come funziona il Base64

Il Base64 trasforma ogni gruppo di 3 byte di un file in 4 caratteri stampabili presi da A–Z, a–z, 0–9, + e /, con = come riempimento alla fine. Per questo il testo codificato è circa il 33 % più grande del file: un’icona da 30 KB diventa circa 40 KB di testo. Un data URI aggiunge una breve intestazione, data:<tipo>;base64,, così il browser sa come leggerlo.

Quando incorporare le immagini come data URI

I data URI sono comodi per:

• piccole icone, loghi e sfondi nei CSS, per risparmiare una richiesta;
• email HTML e documenti HTML in un unico file che devono funzionare senza file esterni;
• API JSON e file di configurazione che possono trasportare solo testo.

Sono poco adatti alle foto grandi. Il testo è un terzo più grande del file, non può essere memorizzato nella cache separatamente dalla pagina o dal foglio di stile che lo contiene, e rallenta il rendering. Oltre i 10-100 KB circa, un normale file immagine servito con una buona cache di solito è la scelta migliore: per questo lo strumento mostra un promemoria per le immagini sopra i 100 KB.

Tutto funziona nel browser: le immagini e il testo incollato non vengono mai caricati.