Encoder e decoder Base64 per immagini
Converti immagini in data URL base64 e viceversa. Trascina un file o incolla un data URL: tutto resta nel tuo browser.
Cos'è un data URL base64?
Un data URL racchiude un piccolo file direttamente in una stringa nel formato data:<mime>;base64,<payload>. I browser lo trattano come qualsiasi altro URL: puoi inserirlo in <img src>, in un background-image CSS o nella firma di un'email. Il base64 espande i byte originali di circa il 33%, quindi è ideale per asset minuscoli (icone, sprite, piccoli avatar). Per qualsiasi cosa più grande di solito conviene usare un normale file immagine dietro a una CDN.
Come usare questo strumento
In modalità Codifica, trascina o seleziona un'immagine e copia il formato che ti serve: data URL completo, base64 grezzo (senza prefisso) o un tag <img> pronto all'uso. In modalità Decodifica, incolla qualsiasi data URL o stringa base64 grezza e l'immagine apparirà in anteprima — comodo quando ne trovi una nel CSS di qualcun altro o in un'email HTML esportata e vuoi capire cos'è davvero. Cambia modalità con il chip in alto.
Quando (e quando non) inserire immagini inline
Buoni casi d'uso: piccoli loghi e icone che viaggiano nello stesso file HTML/CSS, grafiche per firme nelle email transazionali, asset incorporati in una demo HTML monofile. Casi sconsigliati: hero image, gallerie fotografiche, qualsiasi cosa riutilizzata su più pagine: il base64 disabilita la cache HTTP per quell'asset, blocca il caricamento parallelo delle immagini, gonfia il payload HTML/CSS e peggiora il Largest Contentful Paint. Regola pratica: sotto i ~2 KB codificati va in genere bene; oltre, preferisci un file normale.
Tipi MIME comuni
Il tipo MIME dopo data: indica al browser come decodificare il payload: sbagliarlo (per esempio, inviare un JPG come image/png) rompe l'immagine silenziosamente in alcuni browser.
| Formato | Tipo MIME | Note |
|---|---|---|
| PNG | image/png | Lossless, supports transparency. Best for icons and UI. |
| JPG / JPEG | image/jpeg | Lossy. Best for photos. No transparency. |
| WebP | image/webp | Smaller than PNG/JPG; supported by all modern browsers. |
| GIF | image/gif | Animated, 256-colour. Heavier than WebP/MP4 for video. |
| SVG | image/svg+xml | Vector. Prefer URL-encoded over base64 in CSS. |
Domande frequenti
L'immagine esce dal mio browser?
Perché la stringa base64 è molto più lunga del file?
data:<mime>;base64,.Posso incorporare un SVG senza base64?
data:image/svg+xml;utf8,<svg…>) e restano molto più piccoli rispetto alla forma base64. Questo strumento ti fornisce la versione base64 per compatibilità; per il CSS in produzione preferisci la variante URL-encoded.Le immagini inline saranno memorizzate nella cache del browser?
Posso decodificare una stringa base64 arbitraria?
data:, lo strumento prova a rilevare il tipo di immagine dai magic byte (PNG, JPG, GIF, WebP, SVG). Se il rilevamento fallisce, otterrai un errore "non valido" e potrai anteporre manualmente un prefisso data:image/png;base64,.Perché il mio data URL contiene interruzioni di riga?
<img src>, ma alcuni sistemi no. Questo strumento emette sempre il base64 su una sola riga; se incolli una stringa spezzata in modalità decodifica, eliminiamo gli spazi prima di decodificare.