Come si usa un'immagine Base64 nel CSS?

Seleziona il formato CSS `url()` e incolla il risultato come valore di `background-image`, per esempio `background-image: url('data:image/png;base64,...');`. Funziona anche con `content` o `mask-image`.

Che differenza c'è tra Base64 e data URL?

Il Base64 puro è solo la stringa codificata, adatta ai campi JSON o alle API che si aspettano i byte del file. La data URL aggiunge davanti `data:` con il tipo MIME e `;base64,`, così il browser può usarla direttamente come immagine.

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

Il Base64 rappresenta ogni 3 byte con 4 caratteri, quindi il risultato è circa il 33% più grande: nell'esempio sopra 41 byte diventano 56 caratteri. Per un'icona è trascurabile, per una foto di qualche centinaio di KB no.

La conversione in Base64 riduce la qualità dell'immagine?

No. Il Base64 è una codifica, non una compressione: rappresenta esattamente gli stessi byte del file. Decodificando la stringa si riottiene un file identico all'originale.

Qual è la dimensione massima dell'immagine?

20 MB. Oltre questo limite il file viene rifiutato con un messaggio di errore; vengono scartati anche i file che il browser non riconosce come immagini, come PDF o video.

Immagine in Base64

Q: Come si inserisce un'immagine Base64 in HTML?

Scegli il formato HTML ` ` e copia il tag: contiene già `src="data:image/...;base64,..."`. In alternativa copia la data URL e incollala nell'attributo `src` di un tuo tag. Ricordati di compilare l'attributo `alt`.

Carica un'immagine e convertila in una data URL Base64 pronta per HTML, CSS o JSON — convertitore gratuito per PNG, JPEG, SVG, WebP. Nessun upload al server.

Aggiornato marzo 2026

Revisionato da Rafael Duarte

Codifica Decodifica Immagine → Base64 Base64 → Immagine

Trascina qui un’immagine oppure sfoglia

PNG, JPG, GIF, SVG, WebP · Max 20 MB

PNGJPGSVGWEBPGIF

Velocità

—

Privacy

Solo locale

Payload

0 KB

Codifica rapida

L’elaborazione asincrona gestisce file di grandi dimensioni senza bloccare l’interfaccia.

Elaborazione locale

Le immagini vengono codificate nel browser. I dati non lasciano mai il tuo dispositivo.

Supporto Data URI

Genera direttamente stringhe pronte per CSS, HTML e Data URL.

Come convertire un'immagine in Base64

Dal file alla stringa pronta per HTML, CSS o JSON, senza upload

1. Trascina l'immagine

Rilascia un PNG, JPG, GIF, SVG o WebP fino a 20 MB nell'area tratteggiata, oppure cliccala per scegliere il file.

2. Scegli il formato di uscita

Base64 puro, data URL completa, tag HTML <img> già pronto o valore CSS url().

3. Copia il risultato

Clicca su Copia, oppure premi Shift+Invio quando il cursore non è in un campo di testo.

Cosa fa il convertitore immagine in Base64

Più della semplice stringa codificata

Quattro formati di output

Stringa Base64 senza prefisso, data URL data:image/...;base64,, tag <img> e url('...') per i fogli di stile.

Tipo MIME rilevato in automatico

Il prefisso usa il tipo indicato dal browser: image/png, image/jpeg, image/svg+xml e così via, senza scriverlo a mano.

Metadati prima di copiare

Tipo, dimensioni in pixel, peso del file originale e peso della stringa codificata, uno accanto all'altro.

Anteprima con zoom

Apri l'immagine a schermo intero, ingrandisci fino al 400% e trascinala per controllare i dettagli prima di incorporarla.

Conversione locale

Il file viene letto con la FileReader API del browser: l'immagine non viene caricata su nessun server.

Esempi di output

Lo stesso SVG minimo di 41 byte nei quattro formati

Formato

Risultato

Base64 puro

`PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciLz4=` (56 caratteri)

Data URL

`data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...`

HTML `<img>`

`<img src="data:image/svg+xml;base64,PHN2..." alt="" />`

CSS `url()`

`url('data:image/svg+xml;base64,PHN2...')`

Foto JPG da 300 KB

circa 400 KB di testo: il Base64 pesa un terzo in più

Quando conviene incorporare un'immagine in Base64

Casi concreti in cui la data URL semplifica il lavoro

Icone e loghi piccoli

Un'icona di pochi KB inserita nel CSS arriva insieme al foglio di stile, senza una richiesta HTTP in più.

Pagine HTML autonome

Demo, report esportati o documentazione offline in un unico file .html, senza cartelle di immagini da allegare.

Immagini nei payload JSON

Molte API accettano avatar, firme o scansioni come stringa Base64 in un campo JSON: copia il formato puro, senza prefisso.

Test e fixture

Inserisci un'immagine di prova direttamente nel codice di un test o di uno Storybook, senza dipendere da file esterni.

Il percorso inverso

Hai una stringa Base64 e vuoi vedere l'immagine? Apri la scheda «Base64 → Immagine» in cima allo strumento, che fa la conversione opposta.

Errori comuni con le immagini Base64

Usare il Base64 puro come `src`

Senza il prefisso data:image/png;base64, il browser non sa che si tratta di un'immagine e mostra un'icona rotta. Per HTML e CSS scegli Data URL, <img> o url().

Incorporare foto pesanti

Il Base64 aggiunge circa il 33% al peso, appesantisce l'HTML o il CSS che lo contiene, rallentandone il caricamento, e non sfrutta la cache separata dell'immagine. Per le foto è meglio un file ospitato a parte.

Contare sulle data URL nelle email

Il supporto nei client di posta è irregolare: diversi client, Gmail compreso, non mostrano le immagini in data URL. Per le newsletter usa immagini ospitate o allegati inline (CID).

Lasciare vuoto l'attributo `alt`

Il tag <img> generato ha alt="". Va bene per le immagini decorative; per quelle che trasmettono informazioni scrivi una descrizione.

Perché convertire qui

La lettura del file e la codifica avvengono nel browser: l'immagine non lascia il tuo dispositivo, quindi puoi convertire anche screenshot riservati o documenti interni.

I quattro formati di uscita ti evitano di comporre a mano prefisso MIME, tag <img> o url(), e i metadati mostrano subito quanto peserà la stringa prima di incollarla nel codice.

Domande frequenti

Scegli il formato HTML <img> e copia il tag: contiene già src="data:image/...;base64,...". In alternativa copia la data URL e incollala nell'attributo src di un tuo tag. Ricordati di compilare l'attributo alt.

Riferimenti

Wikipedia — Base64

Come funziona la codifica Base64 e perché 3 byte diventano 4 caratteri.

MDN — data: URLs

Sintassi delle data URL e limiti dei browser (in inglese).

RFC 2397 — The "data" URL scheme

La specifica IETF originale dello schema `data:` (in inglese).