Why is the Base64 string larger than the original file?

Base64 encoding represents binary data using only 64 ASCII characters (A-Z, a-z, 0-9, +, /). Since each Base64 character encodes 6 bits of data but takes up 8 bits (1 byte) in text, the encoded output is approximately 33% larger than the original binary file. For example, a 30 KB PNG image becomes roughly 40 KB as a Base64 string. This overhead is the trade-off for being able to embed binary data directly in text formats like HTML, CSS, and JSON.

Is my image uploaded to any server?

No. This tool runs entirely in your browser using the JavaScript FileReader API. Your image file never leaves your device — all encoding is performed client-side. No data is sent to any server, making this tool completely private and safe for sensitive images. You can verify this by disconnecting from the internet and using the tool — it will still work.

What image formats are supported?

This tool supports all common web image formats: PNG, JPEG (JPG), GIF, WebP, SVG, BMP, and ICO. The encoder reads the file's binary data and converts it to Base64 regardless of the image content. The correct MIME type is automatically detected from the file extension and included in the Data URI (e.g., data:image/png;base64,... for PNG files).

Can I use Base64 images in emails?

Yes, but with caveats. Base64-encoded images can be embedded in HTML emails using the Data URI scheme in an img tag's src attribute. This eliminates the need for external image hosting and avoids images being blocked by email clients. However, some email clients (notably older versions of Outlook) may not render Data URI images. For maximum compatibility, keep Base64 images small (under 50 KB original size) and test across target email clients.

Is there a recommended size limit for Base64 images?

For practical use, keep Base64-encoded images under 20-30 KB (original file size). Larger images significantly increase HTML/CSS file size, cannot be cached separately by browsers, and slow down page rendering because the browser must decode the entire string before displaying. For images larger than 30 KB, it's generally better to use a regular image file served via HTTP — the browser can cache it, load it in parallel, and decode it more efficiently.

A Data URI (Uniform Resource Identifier) is a scheme that allows you to embed file data directly in a document instead of linking to an external file. The format is: data:[MIME-type];base64,[encoded-data]. For images, this looks like data:image/png;base64,iVBORw0KGgo... — you can use this string anywhere a URL is expected: in HTML img src attributes, CSS url() values, or JavaScript image sources. Data URIs are defined in RFC 2397.

Convertitore Immagine in Base64

Converti qualsiasi immagine in stringa Base64 codificata. Ottieni codice pronto per HTML <img>, CSS background-image e Markdown. 100% lato client — i tuoi file non escono mai dal tuo browser.

100% Lato Client Nessun Caricamento Codifica Istantanea Pronto per Copia & Incolla

Trascina la tua immagine quiTocca per scegliere la tua immagine

oppure

PNG, JPEG, GIF, WebP, SVG, BMP, ICO

I tuoi file rimangono privati nel tuo browser. Tutta la codifica avviene lato client — nulla viene caricato su alcun server.

Come Codificare Immagine in Base64

Carica

Trascina o seleziona la tua immagine. Supporta PNG, JPEG, GIF, WebP, SVG, BMP e formati ICO.

Codifica

La tua immagine viene istantaneamente convertita in Base64 direttamente nel tuo browser. Nessun caricamento necessario — la codifica avviene lato client.

Copia

Copia il frammento di codice pronto per HTML, CSS o Markdown. Incollalo direttamente nel tuo progetto.

Che Cos'è la Codifica Base64 per Immagini?

Base64 è uno schema di codifica binario-a-testo che converte dati binari in una sequenza di caratteri ASCII. Quando applicato alle immagini, trasforma i dati del file binario grezzo in una rappresentazione testuale utilizzando 64 caratteri (A–Z, a–z, 0–9, +, /) più il carattere di riempimento =.

La stringa codificata può essere incorporata direttamente in HTML, CSS, JavaScript, JSON, XML e altri formati basati su testo utilizzando lo schema Data URI. Invece di fare riferimento a un file di immagine esterno tramite URL, includi i dati dell'immagine inline come stringa data:image/png;base64,.... Il browser decodifica questa stringa e visualizza l'immagine senza effettuare una richiesta HTTP aggiuntiva.

La codifica Base64 è definita in RFC 4648 e lo schema Data URI in RFC 2397. Entrambi sono ampiamente supportati in tutti i moderni browser, client di posta elettronica e framework di sviluppo.

Quando Usare Immagini Base64

Le immagini codificate in Base64 sono ideali in scenari specifici dove eliminare le dipendenze da file esterni è più importante della dimensione del file:

Inline in HTML — Incorpora piccole icone, loghi o immagini decorative direttamente nel tuo HTML. Elimina una richiesta HTTP aggiuntiva, che può migliorare il tempo di caricamento percepito per immagini minuscole (sotto 2–5 KB).
Sfondi CSS — Includi piccoli motivi di sfondo, sprite o icone UI direttamente nel tuo foglio di stile. Nessun file esterno da gestire, e l'immagine si carica con il CSS senza una richiesta separata.
Modelli di posta elettronica — Le email HTML non possono fare affidamento su hosting di immagini esterno accessibile. Incorporare immagini come data URI Base64 garantisce che vengano visualizzate anche quando il client di posta elettronica del destinatario blocca le immagini remote.
Applicazioni in file singolo — Quando si creano file HTML indipendenti, dashboard o report che devono funzionare offline, Base64 ti consente di raggruppare tutte le immagini in un unico file.
Payload API — Quando si inviano dati di immagine tramite API JSON, la codifica Base64 converte i dati di immagine binari in una stringa sicura per JSON. Comune nelle API di caricamento, sistemi di avatar e pipeline di dati.
Generazione dinamica di immagini — Gli script lato server che generano immagini al volo possono restituire stringhe Base64 anziché gestire file temporanei.

Quando NON Usare Immagini Base64

La codifica Base64 non è sempre la scelta giusta. Ecco situazioni in cui i file di immagine regolari sono migliori:

Immagini grandi (oltre 20–30 KB) — La codifica Base64 aggiunge approssimativamente il 33% alla dimensione del file. Un'immagine da 100 KB diventa ~133 KB di testo Base64 incorporato nel tuo HTML o CSS. Questo aumenta la dimensione del documento, rallenta l'analisi e spreca la larghezza di banda.
Caching del browser — I file di immagine esterni possono essere memorizzati nella cache indipendentemente dal browser. Le immagini Base64 incorporate in HTML vengono riscaricate ogni volta che la pagina si carica. Incorporate in CSS, vengono memorizzate nella cache con il foglio di stile ma non possono essere condivise tra le pagine.
Prestazioni di rendering — Il browser deve decodificare la stringa Base64 di nuovo in binario prima di eseguire il rendering. Per immagini grandi, questo passaggio di decodifica aggiunge un ritardo misurabile rispetto al rendering di un file binario memorizzato nella cache direttamente.
SEO e accessibilità — I motori di ricerca non possono indicizzare le immagini codificate in Base64 per la ricerca di immagini. Usa tag <img> corretti con URL src per le immagini che desideri vengano visualizzate nei risultati della ricerca di immagini.
Reti di distribuzione dei contenuti — Le CDN sono progettate per servire asset statici (incluse immagini) da server edge vicini all'utente. Le immagini Base64 inline aggirare completamente i vantaggi della CDN.

Sovraccarico di Dimensioni Base64

La codifica Base64 aumenta la dimensione del file di approssimativamente 33%. Questa è una proprietà intrinseca della codifica: ogni 3 byte di dati binari diventano 4 byte di testo Base64 (ogni carattere Base64 rappresenta 6 bit, ma occupa 8 bit nel testo). La formula esatta è:

Dimensione Base64 = ceil(dimensione originale / 3) × 4

Per riferimento pratico:

Un'icona di 1 KB diventa ~1,33 KB in Base64 — sovraccarico trascurabile
Una miniatura di 10 KB diventa ~13,3 KB — ancora ragionevole per uso inline
Una foto di 100 KB diventa ~133 KB — considera di usare un file regolare
Un'immagine di 1 MB diventa ~1,33 MB — usa decisamente un file esterno

Il punto dolce per le immagini Base64 è sotto 10–20 KB di dimensione file originale. A questo intervallo, eliminare una richiesta HTTP spesso compensa l'aumento di dimensione, specialmente su connessioni ad alta latenza.

Domande Frequenti

Perché la stringa Base64 è più grande del file originale?

La codifica Base64 rappresenta dati binari utilizzando solo 64 caratteri ASCII (A–Z, a–z, 0–9, +, /). Poiché ogni carattere Base64 codifica 6 bit di dati ma occupa 8 bit (1 byte) nel testo, l'output codificato è approssimativamente il 33% più grande del file binario originale. Ad esempio, un'immagine PNG da 30 KB diventa approssimativamente 40 KB come stringa Base64. Questo sovraccarico è il compromesso per poter incorporare dati binari direttamente in formati basati su testo come HTML, CSS e JSON.

La mia immagine viene caricata su alcun server?

No. Questo strumento viene eseguito interamente nel tuo browser usando l'API JavaScript FileReader. Il tuo file di immagine non esce mai dal tuo dispositivo — tutta la codifica viene eseguita lato client. Nessun dato viene inviato a alcun server, rendendo questo strumento completamente privato e sicuro per immagini sensibili. Puoi verificarlo scollegandoti da internet e usando lo strumento — continuerà comunque a funzionare.

Quali formati di immagine sono supportati?

Questo strumento supporta tutti i comuni formati di immagine web: PNG, JPEG (JPG), GIF, WebP, SVG, BMP e ICO. Il codificatore legge i dati binari del file e li converte in Base64 indipendentemente dal contenuto dell'immagine. Il tipo MIME corretto viene rilevato automaticamente dall'estensione del file e incluso nel data URI (ad es., data:image/png;base64,... per i file PNG).

Posso usare immagini Base64 nelle email?

Sì, ma con avvertenze. Le immagini codificate in Base64 possono essere incorporate nelle email HTML utilizzando lo schema Data URI in un tag <img> dell'attributo src. Questo elimina la necessità di hosting di immagini esterno e evita che le immagini vengano bloccate dai client di posta elettronica. Tuttavia, alcuni client di posta elettronica (in particolare le versioni precedenti di Outlook) potrebbero non eseguire il rendering di immagini data URI. Per la massima compatibilità, mantenere le immagini Base64 piccole (sotto 50 KB di dimensione originale) e testare su client di posta elettronica target.

Esiste un limite di dimensione consigliato per le immagini Base64?

Per uso pratico, mantenere le immagini codificate in Base64 sotto 20–30 KB (dimensione file originale). Immagini più grandi aumentano significativamente la dimensione del file HTML/CSS, non possono essere memorizzate nella cache separatamente dai browser e rallentano il rendering della pagina perché il browser deve decodificare l'intera stringa prima della visualizzazione. Per immagini più grandi di 30 KB, è generalmente meglio usare un file di immagine regolare servito tramite HTTP — il browser può memorizzarlo nella cache, caricarlo in parallelo e decodificarlo più efficientemente.

Cos'è un Data URI?

Un Data URI (Uniform Resource Identifier) è uno schema che ti consente di incorporare dati di file direttamente in un documento invece di collegare a un file esterno. Il formato è: data:[tipo-MIME];base64,[dati-codificati]. Per le immagini, questo assomiglia a data:image/png;base64,iVBORw0KGgo... — puoi usare questa stringa ovunque sia previsto un URL: negli attributi src del tag HTML <img>, nei valori url() CSS o nelle origini di immagini JavaScript. I Data URI sono definiti in RFC 2397.

Strumenti Correlati

Base64 in Immagine JPG in PNG PNG in JPG Comprimi Immagine