Convertitore da immagine a Base64

Come funziona la conversione da immagine a Base64

Base64 trasforma i byte di un file immagine in testo semplice composto da 64 caratteri. Ogni 3 byte diventano 4 caratteri, quindi il testo è più grande del file di circa il 33%. Un data URI aggiunge un breve prefisso con il tipo MIME, come data:image/png;base64,, che permette al browser di visualizzare il testo ovunque si aspetti l’URL di un’immagine.

L’immagine viene letta e codificata localmente nel tuo browser. Non viene caricata da nessuna parte, quindi screenshot privati e progetti non ancora pubblicati restano sul tuo dispositivo.

Quale output copiare?

• Data URI per gli attributi src, per JavaScript e per i campi JSON che si aspettano un URL.
• Base64 puro per le API che vogliono solo i byte codificati, di solito accanto a un campo separato per il tipo MIME o il nome del file.
• Tag img HTML da incollare direttamente in una pagina o in un template.
• background-image CSS per icone ed elementi decorativi in un foglio di stile.
• Markdown per documentazione e appunti. Alcuni renderer, tra cui GitHub, non mostrano le immagini in formato data URI.

Formati supportati in sintesi

I primi caratteri di una stringa Base64 rivelano il tipo di file, perché codificano la firma del formato.

Quando conviene incorporare un’immagine

I data URI fanno risparmiare una richiesta di rete e rendono un file autosufficiente. Sono adatti a piccole icone e loghi di pochi kilobyte, a report HTML in un unico file, a minuscoli segnaposto sfocati e a immagini inviate all’interno di un JSON. Sono invece una scelta poco felice per le foto di grandi dimensioni: il terzo in più di peso, l’assenza di una cache separata nel browser e un file HTML o CSS più pesante, che deve essere scaricato prima che venga visualizzato qualcosa, di solito costano più della richiesta risparmiata. Se il tuo sito invia una Content-Security-Policy, per le immagini incorporate serve anche data: in img-src.