Convertitore da immagine a Base64

Cos'è un'immagine Base64 (data URI)?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

Caratteristiche principali

Esempi

transparent-1x1.png  (un PNG da 68 byte)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 KB)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

Come convertire un'immagine in Base64

1. 1

   Aggiungi la tua immagine

   Trascina un'immagine sulla zona di rilascio, clicca per sfogliare, o incolla dagli appunti con Ctrl+V / Cmd+V. PNG, JPG, GIF, WebP, SVG, ICO e BMP sono tutti supportati e codificati interamente nel tuo browser.

2. 2

   Scegli un formato di output

   Scegli Data URI, Base64 grezzo, HTML , background CSS, Markdown o JSON dalle schede. Controlla la barra dei metadati per l'aumento di dimensione e il badge di consiglio per capire se l'inlining vale la pena.

3. 3

   Copia o scarica

   Clicca Copia per prendere lo snippet, o Scarica per salvarlo come file. Per invertire il processo, passa alla scheda Base64 → Immagine, incolla una stringa e scarica l'immagine ricostruita.

Insidie comuni

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Casi d'uso comuni

Inserisci un logo o un'icona inline nel CSS

Trascina una piccola icona PNG o SVG, copia lo snippet CSS background-image e incollalo nel tuo foglio di stile per eliminare una richiesta HTTP per un asset che cambia raramente. Mantienilo sotto i ~2 KB (osserva il badge verde) così il foglio di stile resta leggero.

Incorpora immagini nelle email HTML

I client email spesso bloccano le immagini remote. Codifica il tuo logo come data URI e incolla l'elemento nel template così viene renderizzato senza un fetch dal server. Fai dei test sui client — mantieni gli incorporamenti a piccole icone, non foto.

Markdown e README autonomi

Quando non puoi ospitare un'immagine — un'issue GitHub, un notebook, un documento offline — l'output Markdown incorpora l'immagine direttamente nel file così viaggia con il testo. Ideale per piccoli diagrammi e badge.

Immagini dentro JSON o payload API

Devi spedire una miniatura dentro un documento JSON o un file di configurazione? L'output JSON ti dà un oggetto { mime, data } da inserire direttamente, e il decodificatore recupera l'immagine dall'altra parte.

Debug rapido di data URI

Trovato un misterioso data: URI in un foglio di stile o in una risposta API? Incollalo nella scheda Base64 → Immagine per vedere cosa è davvero, leggere le sue dimensioni reali e scaricarlo come file normale per un'ispezione più ravvicinata.

Widget e bookmarklet a file singolo

I bookmarklet e i widget incorporabili devono essere autonomi senza dipendenze esterne. Fare l'inlining delle loro icone come Base64 mantiene tutto in un unico file che funziona ovunque venga inserito.

Dettagli tecnici

Come funziona la codifica Base64

Base64 prende il flusso binario dell'immagine tre byte (24 bit) alla volta e lo divide in quattro gruppi da 6 bit, ciascuno mappato a un carattere nell'alfabeto a 64 simboli. Quando la lunghezza dell'input non è multiplo di tre, uno o due caratteri di padding = segnano il resto. Questo rapporto 3-a-4 è il motivo per cui il testo codificato è circa il 33% più grande della sorgente. Lo strumento calcola la lunghezza in byte decodificata direttamente dalla lunghezza della stringa e dal padding, quindi le cifre di dimensione che riporta sono esatte, non stimate.

Rilevamento MIME e magic byte

Quando codifichi un file, il suo tipo MIME proviene dall'oggetto File del browser. Quando decodifichi una stringa Base64 grezza senza prefisso data:, lo strumento ispeziona i caratteri iniziali, che corrispondono ai magic byte dell'immagine: iVBORw0KGgo per PNG, /9j/ per JPEG, R0lGOD per GIF, UklGR per WebP, e PHN2Zy o PD94bWw per SVG. Questo permette al decodificatore di ricostruire un data URI corretto e di scaricare con la giusta estensione di file anche quando l'input è solo il payload nudo.

Elaborazione solo locale

La codifica usa il metodo readAsDataURL dell'API FileReader, che restituisce un data URI sintetizzato interamente nel browser. La decodifica per il download usa atob più un Uint8Array per ricostruire il binario, poi un Blob e un object URL — di nuovo senza alcuna rete coinvolta. Il risultato è uno strumento che puoi eseguire offline e a cui affidare immagini riservate, perché i byte non lasciano mai la pagina. Puoi verificare il comportamento a zero richieste negli strumenti per sviluppatori del tuo browser.

Buone pratiche

Fai l'inlining solo di asset piccoli e stabili

Il punto ideale per Base64 sono asset sotto i ~2 KB che cambiano raramente e appaiono su poche pagine — icone, piccoli loghi, sprite UI. Oltre i ~10 KB, la penalità di dimensione e la cache persa superano la richiesta risparmiata, specialmente ora che HTTP/2 rende economiche le richieste extra. Lascia che il badge di consiglio ti guidi, e servi foto e grafiche grandi come normali file in cache.

Preferisci la codifica URL per l'SVG

L'SVG è testo, quindi Base64 lo gonfia senza alcun guadagno. Quando inserisci SVG inline nel CSS o nell'HTML, codifica invece il markup in URL — è di solito più piccolo, resta leggibile dall'uomo e si comprime meglio con gzip/brotli. Riserva l'SVG in Base64 ai flussi che lo richiedono specificamente. Il nostro Codificatore/Decodificatore URL gestisce il percent-encoding.

Imposta sempre il tipo MIME corretto

Un data URI viene renderizzato solo se il suo tipo MIME corrisponde al contenuto: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. Un tipo sbagliato o mancante è la ragione numero uno per cui un'immagine incorporata non si visualizza. Quando copi da questo strumento il tipo è impostato per te; se assembli i URI a mano, ricontrolla il prefisso.

Comprimi prima di codificare

Poiché Base64 aggiunge il ~33% sopra la dimensione del file, ridurre prima la sorgente paga due volte. Passa le immagini attraverso il nostro Compressore Immagini — o esportale alle dimensioni giuste — prima di codificarle, così il data URI risultante è il più piccolo possibile. Un PNG compresso da 4 KB batte un originale da 40 KB sia come file sia inline.

Non affidarti mai a Base64 per la privacy

Base64 è banalmente reversibile e non offre alcuna protezione. Non usarlo per oscurare contenuti immagine sensibili — chiunque può decodificarlo istantaneamente, anche con la scheda in questa pagina. Se il contenuto deve essere protetto, usa veri controlli di accesso e crittografia sul server, e servi l'immagine attraverso un endpoint autenticato.

Domande frequenti

Cosa fa questo convertitore da immagine a Base64?

Legge un'immagine che trascini, incolli o selezioni e ne codifica i byte come stringa Base64 — interamente dentro il tuo browser. Ottieni il Base64 grezzo, un data URI pronto all'uso (data:image/png;base64,…) e snippet da copia-incolla per HTML , CSS background-image, Markdown e JSON. Una barra dei metadati riporta la dimensione del file originale, la dimensione codificata, l'esatta percentuale di aumento (Base64 è circa il 33% più grande), le dimensioni in pixel e il tipo MIME. Nulla viene caricato: la codifica gira localmente tramite l'API FileReader, quindi lo stesso strumento è sicuro per screenshot, asset interni e grafiche non ancora pubblicate. Per fare il percorso inverso, usa la scheda Base64 → Immagine o il nostro decodificatore da Base64 a immagine.

Le mie immagini vengono caricate su un server?

No. Ogni passaggio avviene lato client nel tuo browser usando l'API FileReader e la codifica di stringhe JavaScript. La tua immagine non viene mai trasmessa, mai memorizzata e mai registrata. Puoi confermarlo aprendo la scheda Rete del tuo browser — codificare un'immagine genera zero richieste di rete. Questo rende lo strumento sicuro per materiale sensibile: screenshot di prodotti prima del lancio, diagrammi interni, asset dei clienti e qualsiasi cosa sotto NDA. Non c'è alcun limite di dimensione del file imposto da un limite di upload, solo il limite pratico di quanto grande possa essere una stringa Base64 che il tuo browser e il sistema di destinazione gestiscono comodamente.

Di quanto Base64 aumenta la dimensione di un'immagine?

Base64 codifica ogni 3 byte di dati binari come 4 caratteri ASCII, quindi la stringa codificata è circa il 33% più grande del file originale (più qualche byte di padding e il prefisso data:). Un PNG da 9 KB diventa circa 12 KB di testo. Questo overhead è la singola ragione più importante per non usare Base64 su immagini grandi: spedisci più byte e, poiché la stringa è incorporata nell'HTML o nel CSS, quei byte vengono riscaricati ogni volta che il file che li contiene cambia e non possono essere messi in cache in modo indipendente. Lo strumento mostra l'aumento esatto per il tuo file specifico nella barra dei metadati così puoi decidere con numeri reali.

Quando dovrei usare un'immagine Base64 invece di un file normale?

Base64 (come data URI) è adatto a risorse piccole e che cambiano raramente, dove evitare una richiesta HTTP separata conta più della cache: piccole icone e loghi inline nel CSS, immagini incorporate nelle email HTML (molti client bloccano le immagini esterne ma renderizzano i data URI), widget o bookmarklet a file singolo che devono essere autonomi, sprite SVG e immagini memorizzate dentro payload JSON/API. Una regola pratica: sotto i ~2 KB e usata su una o due pagine, l'inlining di solito conviene. Il badge di consiglio in questo strumento codifica esattamente questa euristica — verde sotto 2 KB, ambra fino a 10 KB, rosso oltre.

Quando NON dovrei usare immagini Base64?

Evita Base64 per qualsiasi cosa grande o riutilizzata su più pagine. Quattro motivi concreti: (1) l'aumento di dimensione del ~33% significa più byte sulla rete; (2) un'immagine inline non può essere messa in cache da sola — viene riscaricata a ogni modifica dell'HTML o del CSS che la contiene, e ripetuta su ogni pagina che la incorpora; (3) decodificare un data URI grande costa CPU e batteria, cosa percepibile su mobile; e (4) perdi le immagini responsive (srcset/sizes) e il lazy-loading. Dato che HTTP/2 multiplexa molte richieste piccole a basso costo, la ragione originale per l'inlining — ridurre il numero di richieste — raramente si applica ancora. Per foto, immagini hero o qualsiasi cosa oltre i ~10 KB, un normale file in cache si carica quasi sempre più velocemente. Se l'obiettivo è un file più piccolo, passalo prima attraverso il nostro Compressore Immagini.

Come uso l'output Base64 in HTML e CSS?

Per HTML, passa alla scheda HTML e incolla l'elemento generato: . Per CSS, usa la scheda CSS, che avvolge il data URI in background-image: url("data:image/png;base64,…"). Entrambi funzionano ovunque sia accettato un URL — img src, background CSS, mask-image, persino i tag link del favicon. Lo schema data: è supportato da ogni browser moderno. Un'avvertenza: data URI molto lunghi nell'HTML inline possono nuocere alla leggibilità e, nel CSS, gonfiare il foglio di stile che viene spedito a ogni visitatore, quindi riserva l'inlining ad asset davvero piccoli.

Quali formati immagine sono supportati?

PNG, JPEG/JPG, GIF (incluse le animate), WebP, SVG, ICO e BMP sono tutti supportati, più AVIF dove il browser può decodificarlo. Poiché lo strumento codifica i byte grezzi invece di ridisegnare l'immagine, le GIF animate restano animate, i PNG trasparenti mantengono il loro canale alfa e gli SVG restano pienamente scalabili. Il tipo MIME viene letto dal file stesso e, quando incolli Base64 grezzo nel decodificatore, dedotto dai magic byte dei dati. Non c'è alcuna conversione di formato durante la codifica — l'output rappresenta esattamente il file che hai fornito.

Perché l'SVG è un caso speciale?

L'SVG è testo XML, non binario, quindi Base64 in realtà lo rende più grande e più difficile da leggere senza alcun vantaggio. Per inserire SVG inline nel CSS o nell'HTML, la codifica URL del markup (percent-encoding di una manciata di caratteri come #, <, > e le virgolette) è di solito più piccola di Base64 e mantiene il sorgente leggibile e ben comprimibile con gzip. Questo strumento offre comunque l'output SVG in Base64 perché alcuni flussi lo richiedono, ma se stai ottimizzando il CSS a mano, preferisci un data URI con codifica URL. Il nostro Codificatore/Decodificatore URL aiuta con questo approccio.

Base64 è la stessa cosa della crittografia?

No. Base64 è una codifica, non una crittografia — è completamente reversibile da chiunque senza bisogno di alcuna chiave. Esiste per rappresentare dati binari usando un insieme sicuro di caratteri ASCII stampabili, così i dati sopravvivono al transito attraverso sistemi che gestiscono solo testo (HTML, JSON, header email, URL). Chiunque può decodificare una stringa Base64 riottenendo l'immagine originale in pochi secondi, anche con la scheda Base64 → Immagine qui presente. Non trattare mai Base64 come un modo per nascondere o proteggere contenuti immagine sensibili; non offre alcuna riservatezza.

Posso incorporare un'immagine Base64 in un'email?

Sì, ed è uno degli usi migliori della tecnica. Molti client email bloccano per impostazione predefinita le immagini ospitate esternamente per privacy, il che rompe i layout che si affidano a loghi remoti. Incorporare immagini piccole come data URI assicura che vengano renderizzate immediatamente senza un fetch dal server. I compromessi: alcuni client più vecchi (in particolare certe versioni di Outlook) hanno un supporto irregolare ai data URI, e gli incorporamenti grandi gonfiano la dimensione del messaggio che ogni destinatario scarica. Mantieni piccole le immagini incorporate — loghi e icone, non fotografie — e fai dei test sui client di destinazione.

Perché la mia immagine Base64 non viene renderizzata?

Le cause più comuni: un tipo MIME mancante o sbagliato nel prefisso data: (usa image/png per PNG, image/jpeg per JPG, image/svg+xml per SVG), spazi o interruzioni di riga inseriti accidentalmente nella stringa, una copia troncata che ha perso il padding finale (= o ==), oppure incollare solo il Base64 grezzo senza il prefisso data:…;base64, dove ci si aspetta un URL. Il decodificatore in questo strumento è tollerante — rimuove gli spazi, accetta input con o senza prefisso e deduce il MIME dai magic byte dell'immagine — quindi incollare la tua stringa nella scheda Base64 → Immagine è il modo più rapido per confermare se i dati stessi sono validi.