Come si usa
- 1.Per codificare, lascia selezionato «Da immagine a Base64» e trascina un’immagine sulla pagina, incollane una dagli appunti oppure fai clic su «Scegli un’immagine».
- 2.Copia la versione che ti serve: il data URI per un
srco unurl(), il Base64 semplice per un’API, oppure il tag HTML o la regola CSS già pronti. Per i file SVG ottieni anche un data URI più corto, codificato per URL. - 3.Per decodificare, passa a «Da Base64 a immagine» e incolla un data URI o del Base64 semplice. Funziona anche codice CSS o HTML che ne contiene uno.
- 4.Controlla anteprima, formato e peso, poi fai clic su «Scarica» per salvare l’immagine con l’estensione corretta.
Cos’è un data URI
Un data URI inserisce un intero file dentro un URL, così una pagina può mostrare un’immagine senza scaricarla a parte. La sintassi è data:[<media type>][;base64],<data>, per esempio data:image/png;base64,iVBORw0KGgo…. Il media type indica al browser che tipo di dati sono; ;base64 dice che i dati sono codificati in Base64 e non come testo codificato per URL.
Il Base64 scrive ogni 3 byte del file come 4 caratteri ASCII semplici, ed è per questo che il risultato è circa un terzo più grande dell’immagine. Gzip e Brotli recuperano una parte di questo spazio durante l’invio della pagina, ma il browser deve comunque decodificare tutto il testo.
Quando un’immagine inline aiuta, e quando peggiora le cose
Incorporare un’immagine conviene quando è molto piccola: icone, piccoli sfondi e segnaposto da uno o due kilobyte, per cui una richiesta separata costerebbe più dei byte stessi. È comodo anche per report HTML in un unico file, dati di test e API o documenti JSON che richiedono un’immagine sotto forma di testo.
Per tutto ciò che è più grande, di solito rende le pagine più lente. L’immagine non può essere memorizzata nella cache separatamente, quindi viene scaricata di nuovo con ogni pagina o foglio di stile che la contiene; nel CSS ritarda anche la visualizzazione, perché il browser aspetta l’intero foglio di stile. Con HTTP/2 le richieste aggiuntive costano poco, quindi oltre qualche kilobyte è meglio un normale file immagine.
L’email è un caso a parte: Gmail e Outlook non mostrano le immagini in data URI, quindi le newsletter dovrebbero collegare immagini ospitate online oppure inserirle come allegati inline (CID).
Un data URI più corto per gli SVG
L’SVG è testo, quindi non ha bisogno del Base64. Un data URI SVG codificato per URL, come data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'…, di solito è più corto del 15–25%, si comprime meglio e resta leggibile nel CSS.
Vanno codificati solo pochi caratteri: <, > e soprattutto # (scritto %23), che altrimenti terminerebbe l’URL, per esempio in un colore come fill='%23f00'. Questo strumento compatta anche gli spazi e passa agli apici singoli, così l’URI entra in url("…") senza altri escape.
Domande frequenti
La mia immagine viene caricata da qualche parte?
No. L’immagine viene letta e codificata dal tuo browser, sul tuo dispositivo, e anche il Base64 incollato viene decodificato lì. Nulla viene inviato a nestoo o a terzi.
Perché la versione Base64 è più grande del file immagine?
Il Base64 rappresenta ogni 3 byte con 4 caratteri di un alfabeto di 64, quindi il testo è circa il 33% più grande del file, più il breve prefisso data:image/…;base64,. È il prezzo da pagare per salvare dati binari come testo semplice.
Come uso un data URI in HTML, CSS, Markdown o JSON?
In HTML, mettilo nel src di un’immagine: <img src="data:image/png;base64,…" alt="">. In CSS, usalo dentro url(): background-image: url("data:…");. In JSON è una normale stringa; molte API vogliono solo la parte Base64, senza il prefisso data:. In teoria Markdown accetta , ma GitHub e molti altri siti eliminano le immagini in data URI, quindi lì collega un’immagine ospitata online.
Quanto può essere grande l’immagine?
Lo strumento codifica immagini fino a 20 MB, e i browser riescono a mostrare data URI di diversi megabyte. In pratica, limita le immagini inline a pochi kilobyte: quelle più grandi appesantiscono HTML o CSS e non possono essere memorizzate nella cache separatamente.
Come riconverto un data URI in un file immagine?
Passa a «Da Base64 a immagine» e incolla il data URI o il solo Base64. Lo strumento rileva il formato reale dai dati stessi, mostra un’anteprima e salva il file con l’estensione corretta, anche se l’URI dichiarava un tipo diverso.