Decodificatore Base64 per Immagini | Decodifica e Anteprima Immagini Online

Che cos'è un decodificatore di immagini base64?

Un decodificatore di immagini base64 è uno strumento che riconverte in immagine una stringa di testo codificata in base64. Base64 è un modo di scrivere dati binari, come i byte di un file immagine, usando soltanto 64 caratteri di testo semplice (lettere, cifre, +, / e = per il riempimento). Browser, e-mail e molte API conservano le immagini in questo modo, così un'immagine può viaggiare dentro un testo semplice invece che come file separato. Il decodificatore inverte il processo: si incolla la stringa e compare l'immagine originale.

Il formato data URL

Sul web, un'immagine base64 di solito è scritta come data URL. Lo schema URL data: è stato definito nel 1998. Lo schema è:

Per esempio:

Ogni parte ha una funzione:

• data: indica che si tratta di un data URL, non di un normale indirizzo web.
• image/png è il tipo MIME, che dice al browser di che tipo di file si tratta.
• ;base64 indica che i dati dopo la virgola sono codificati in base64. È facoltativo. Senza di esso, i dati sono testo semplice o codificato con percentuale.
• Tutto ciò che segue la virgola è l'immagine codificata vera e propria.

Come funziona il decodificatore

La decodifica avviene in quattro passaggi.

1. Lo strumento controlla se la stringa inizia con data:. In caso affermativo, legge il tipo MIME da quel prefisso.
2. Elimina eventuali spazi, tabulazioni o interruzioni di riga, poiché le stringhe base64 lunghe a volte sono suddivise su più righe. Questo segue la regola della decodifica base64 tollerante usata dai browser, il cui primo passo è rimuovere tutti gli spazi bianchi.
3. Decodifica il testo base64 riportandolo in byte grezzi.
4. Esamina i primi byte del risultato. Ogni formato di immagine comune inizia con una sequenza fissa di byte, chiamata firma o «numero magico». I file PNG iniziano con 89 50 4E 47, i file JPEG iniziano con FF D8 FF, e così via. Il decodificatore usa la tabella delle firme delle immagini dello standard WHATWG MIME Sniffing. Confronta queste firme per confermare, e se necessario correggere, il tipo di immagine.

Un URL data: il cui tipo non è image/... viene rifiutato perché non è un'immagine. Un URL data:image/... senza ;base64 viene passato al browser senza modifiche.

Se la stringa non ha il prefisso data:, il decodificatore la tratta come dati base64 grezzi, la decodifica e legge la firma allo stesso modo. Se i byte non corrispondono a nessuna firma di immagine nota e non sembrano testo SVG, il decodificatore segnala che la stringa non sembra essere un'immagine. Non tenta di indovinare un formato né ricorre a un tipo predefinito.

L'SVG è gestito in modo diverso perché è un formato di testo (XML), non binario, e quindi non ha una firma di byte fissa. Il decodificatore controlla invece se il testo decodificato inizia con un tag <svg, oppure con una dichiarazione XML che ne contiene uno.

Formula della dimensione di un'immagine base64

Base64 trasforma ogni 3 byte di dati binari in 4 caratteri di testo. La formula per la lunghezza codificata è:

I simboli ⌈ ⌉ significano «arrotonda per eccesso al numero intero successivo», perché base64 lavora sempre in gruppi di 4 caratteri e completa un gruppo rimasto incompleto con segni =.

Per i file grandi il risultato è circa un terzo più grande dell'originale, perché 4 ÷ 3 ≈ 1,33. I file piccoli possono mostrare un aumento percentuale maggiore, perché l'arrotondamento al gruppo successivo di 4 caratteri pesa di più quando i dati di partenza sono pochi.

Esempio svolto

L'esempio PNG qui sopra si decodifica in 85 byte di dati immagine. Applicando la formula:

La stringa base64 è infatti lunga 116 caratteri, il che corrisponde. Si tratta di un aumento del 36% rispetto agli 85 byte originali (116 ÷ 85 ≈ 1,36), un po' sopra la cifra del 33% perché il file è molto piccolo.

Formati di immagine supportati

Il decodificatore legge la firma in byte dei dati decodificati per identificare il formato. Riconosce questi tipi:

Come decodificare un'immagine base64

1. Copiare la stringa base64, con o senza il prefisso data:image/..., da HTML, CSS, una risposta API o un'e-mail.
2. Incollarla nella casella di input.
3. L'immagine viene decodificata automaticamente poco dopo che si smette di digitare, oppure premendo il pulsante di decodifica.
4. L'immagine decodificata compare nell'area di anteprima. Il suo data URL può essere copiato con il pulsante «Copia URL immagine», e l'immagine stessa può essere salvata facendo clic con il pulsante destro su di essa nell'anteprima e scegliendo di salvare l'immagine, poiché nel browser è visualizzata come un normale elemento immagine.

Usi comuni delle immagini base64

• Incorporamento in HTML, CSS o JavaScript: inserire i dati dell'immagine direttamente nel codice evita una richiesta separata di file.
• Modelli e-mail: alcuni client di posta bloccano per impostazione predefinita le immagini collegate da fonti esterne, mentre un'immagine base64 incorporata viene comunque mostrata.
• Strumenti HTML in un solo file: un'intera pagina, immagini comprese, può essere distribuita come un unico file autonomo.
• Risposte API: un'immagine può viaggiare dentro un payload JSON invece di richiedere un proprio endpoint.
• Sfondi CSS e icone: le icone piccole a volte sono scritte direttamente in un foglio di stile come data URL.

Compromessi delle immagini base64

La codifica base64 è comoda ma non gratuita:

• Il testo codificato è circa un terzo più grande del file originale.
• I browser non possono memorizzare nella cache un'immagine incorporata come fanno con un file collegato, quindi viene scaricata di nuovo ogni volta che viene scaricata la pagina o il foglio di stile che la contiene.
• Il browser deve decodificare il testo base64 prima di poter mostrare l'immagine, il che richiede una piccola quantità di elaborazione aggiuntiva.
• A causa dell'aumento di dimensione e della perdita della cache, l'incorporamento in base64 funziona meglio per immagini piccole, come icone o semplici loghi. Le foto più grandi di solito si servono meglio come normali file immagine.

Domande frequenti

Che cos'è un decodificatore di immagini base64?

È uno strumento che riconverte una stringa di testo codificata in base64 in un'immagine visualizzabile, come un file PNG, JPEG, GIF, WebP, BMP o SVG.

Come si decodifica un'immagine base64?

Si incolla la stringa base64, con o senza il prefisso data:image/..., nel decodificatore. Lo strumento legge la stringa, la decodifica e mostra l'immagine risultante.

Una stringa base64 può essere decodificata senza il prefisso data URL?

Sì. Il decodificatore la tratta come dati base64 grezzi, decodifica i byte e legge i primi byte per identificare il formato dalla firma, come PNG, JPEG, GIF, WebP, BMP o ICO. L'SVG si riconosce cercando un tag <svg nel testo decodificato. Se nessuno di questi corrisponde, il decodificatore segnala che la stringa non sembra essere un'immagine invece di indovinare un formato.

Perché la mia immagine base64 non si decodifica?

Le cause più comuni sono una stringa troncata a metà oppure caratteri aggiuntivi che non fanno parte dell'alfabeto base64. Anche la variante sicura per gli URL, che usa - e _ al posto di + e /, viene rifiutata. La mancanza del riempimento = alla fine di solito non è un problema. Copiare l'intera stringa, compreso il prefisso data:image/... se presente, di solito risolve il problema.

La codifica base64 è una forma di sicurezza o di crittografia?

No. Base64 è soltanto un modo di rappresentare i byte come testo; non nasconde nulla. Chiunque può decodificare una stringa base64 in pochi secondi con uno strumento gratuito, quindi non andrebbe mai usata per proteggere immagini private o altri dati.

Quanto è più grande una stringa base64 rispetto all'immagine originale?

Circa un terzo più grande per i file più grandi, perché ogni 3 byte dei dati originali diventa 4 caratteri di testo. Un'immagine da 100 KB diventa circa 133 KB una volta codificata. Le immagini piccole possono mostrare un aumento percentuale un po' più alto a causa dell'arrotondamento.

Cenni storici

Base64 deriva dall'e-mail, che un tempo trasportava solo testo semplice. Una specifica Privacy Enhanced Mail del 1987 descriveva la trasformazione di ogni 3 byte in 4 caratteri stampabili di un insieme di 64 caratteri. Lo schema URL data: del 1998 ha poi reso possibile incorporare immagini base64 direttamente nelle pagine web. La definizione attuale di base64 è l'RFC 4648 (2006).

Riferimenti

1. IETF. RFC 4648: The Base16, Base32, and Base64 Data Encodings. RFC 4648 — 3 byte diventano 4 caratteri; riempimento con =.
2. IETF. RFC 2397: The "data" URL scheme. RFC 2397 — sintassi dei data URL; ;base64 è facoltativo; pubblicato nel 1998.
3. WHATWG. Infra Standard. Decodifica base64 tollerante — rimozione degli spazi bianchi; gestione del riempimento.
4. WHATWG. MIME Sniffing Standard. Confronto con lo schema del tipo di immagine — firme in byte delle immagini.
5. MDN Web Docs. Base64. Voce del glossario su Base64 — l'output codificato è circa un terzo più grande.
6. IETF. RFC 989: Privacy Enhancement for Internet Electronic Mail, Part I. RFC 989 — codifica e-mail del 1987 di 3 byte in 4 caratteri stampabili.