Convertitore Immagine → Base64

Codifica qualsiasi immagine in un data URI Base64, o incolla un data URI per decodificarlo in un'immagine. Copia il risultato o prendi lo snippet CSS url(). Niente lascia il tuo dispositivo.

Come funziona Immagine in Base64

Immagine in Base64 legge il tuo file immagine e lo codifica come URI dati Base64 che puoi incorporare direttamente in HTML, CSS o JSON senza necessità di una richiesta file separata. La conversione usa la FileReader API nel browser; nessun byte della tua immagine viene inviato a un server. Puoi anche incollare una stringa Base64 per decodificarla e visualizzare l'anteprima dell'immagine, tutto localmente.

Un URI dati Base64 è circa il 33% più grande del binario originale perché ogni gruppo di tre byte si espande in quattro caratteri ASCII. Questo aumento di dimensione è il compromesso atteso per la comodità di incorporare un'immagine in un documento o foglio di stile. Lo strumento mostra sia la stringa Base64 grezza che uno snippet del tag HTML img pronto all'uso e uno snippet CSS background-image per un rapido copia-incolla nel progetto.

Scritto da Bastien Sulyan

Come usare Immagine in Base64, passo dopo passo

Trascina un file immagine nell'area di caricamento o fai clic per sfogliarla. Formati accettati: JPEG, PNG, WebP, GIF, SVG.
L'URI dati Base64 appare immediatamente nel campo di output.
Copia la stringa Base64 grezza, o usa lo snippet HTML img tag o CSS background-image pre-formattato.
Per decodificare, incolla una stringa Base64 nel campo di input e passa alla modalità decodifica per visualizzare l'anteprima dell'immagine.
Fai clic sul pulsante copia accanto a qualsiasi snippet per copiarlo negli appunti.

Casi d'uso comuni

Uno sviluppatore front-end incorpora una piccola icona come URI dati in un file CSS per eliminare una richiesta HTTP aggiuntiva.
Uno sviluppatore incorpora un piccolo spinner di caricamento come attributo src Base64 in modo che l'immagine segnaposto sia disponibile prima che il bundle JavaScript si carichi.
Un ingegnere QA copia il Base64 di un'immagine di test da incollare direttamente in un payload JSON per un test API.
Un creatore di template email incorpora un logo firma come URI dati Base64 perché alcuni client email bloccano le richieste di immagini esterne.

Domande frequenti

Perché l'output Base64 è circa un terzo più grande del mio file originale?

La codifica Base64 rappresenta ogni tre byte binari come quattro caratteri ASCII (un rapporto di 4/3). Un'immagine di 100 KB in binario diventa circa 133 KB come stringa Base64. Questo è intrinseco allo schema di codifica, non un limite dello strumento.

Il contenuto dell'immagine viene trasmesso a un server durante la codifica?

No. La FileReader API legge il file binario dal disco locale e passa il risultato direttamente alla funzione di codifica JavaScript all'interno della scheda del browser. I dati dell'immagine non lasciano il dispositivo.

Posso usare l'output URI dati in qualsiasi contesto HTML o CSS?

Sì. Un URI dati che inizia con data:image/jpeg;base64, seguito dalla stringa codificata, può essere usato come attributo src di un tag img o come valore url() nella proprietà CSS background-image. Tutti i browser moderni supportano gli URI dati. Gli URI dati molto grandi possono rallentare il rendering della pagina, quindi l'incorporamento è tipicamente riservato a immagini piccole di pochi kilobyte.

Lo strumento supporta le GIF animate?

Lo strumento codifica il contenuto binario completo di qualsiasi file fornito, incluse le GIF animate. L'URI dati risultante, quando usato come src di un tag img, riprodurrà l'animazione nei browser che supportano l'animazione GIF.

Come faccio il percorso inverso e decodifico una stringa Base64 in un'immagine?

Passa lo strumento alla modalità decodifica, incolla la stringa Base64 (con o senza il prefisso data:) e lo strumento la decodificherà e proporrà l'immagine binaria come download oltre a mostrare un'anteprima.

Strumenti correlati

Mantieni tutto locale, esplora gli strumenti complementari.

Tutti gli strumenti immagini