Trascina qui la tua immagine
JPG, PNG, WebP, GIF, SVG accettati
Trasforma qualsiasi immagine in una stringa Base64 pronta per essere usata inline in HTML, CSS o JSON, senza URL esterni.
Carica la tua immagine JPG, PNG, WebP o SVG. Il tool genera istantaneamente la stringa Base64 e il data URI completo (data:image/png;base64,...) pronto da incollare in CSS, HTML o JavaScript. Tutto avviene nel browser, nessun file viene inviato a server.
Le immagini Base64 inline eliminano una richiesta HTTP per ogni immagine. Sono ideali per: favicon inline in HTML; icone SVG incorporate in CSS per eliminarere un file separato; immagini placeholder ultra-leggere per il lazy loading (blur-up technique); email HTML dove le immagini esterne vengono spesso bloccate dai client di posta; applicazioni offline o PWA con Content Security Policy restrittive; certificati e badge che devono esistere come file HTML autocontenuti.
Per immagini di grandi dimensioni (>10KB) è più efficiente usare URL normali con caching HTTP: il Base64 aumenta il peso del file del 33% e non beneficia del caching separato del browser.
In HTML come attributo src: <img src="data:image/png;base64,ABC...">. In CSS: background-image: url('data:image/png;base64,ABC...'); — ideale per icone nei pseudo-elementi o background di bottoni. In JavaScript per costruire Blob: fetch('data:image/png;base64,...').then(r => r.blob()) oppure per canvas: ctx.drawImage(img, 0, 0) dopo aver impostato img.src = dataUri.
Un'icona SVG di 500 byte diventa ~667 byte in Base64 (+33%) ma elimina una richiesta HTTP separata — netto guadagno su connessioni lente. Una foto JPG da 80KB diventa ~107KB in Base64 e blocca il render finché l'intero HTML non è caricato — netto svantaggio. La soglia pratica: sotto i 4–8KB conviene Base64, sopra conviene URL esterno con cache lunga.
Base64 standard usa i caratteri + e / che hanno significato speciale negli URL. Base64url li sostituisce con - e _, rendendolo sicuro per URL e cookie senza encoding aggiuntivo. JWT usa Base64url. Per immagini in CSS e HTML usa sempre Base64 standard — il data URI non ha problemi con + e /.
Data URI malformato: il formato completo è data:[mimetype];base64,[stringa] — non dimenticare il mime type (es. image/png, image/svg+xml). Virgolette nei CSS: il data URI deve essere racchiuso in virgolette: url("data:..."). SVG Base64: per SVG è spesso più efficiente usare il formato url("data:image/svg+xml,...) con encoding URL invece di Base64 — il risultato è più leggibile e di dimensioni simili.
Sì — JPG, PNG, GIF, WebP, SVG, BMP, ICO e qualsiasi formato immagine supportato dal browser. Il data URI specifica il mime type esatto, quindi il browser sa come renderizzare l'immagine. SVG può essere encodato sia in Base64 che in URL encoding — spesso URL encoding produce file più piccoli.
Incorpora le immagini come attributo src del tag <img> con il data URI Base64 completo. Non tutti i client email supportano il CSS background-image inline, ma tutti supportano il tag <img> con data URI. Tieni le immagini piccole: molti server email hanno limiti di dimensione sul corpo del messaggio (spesso 25MB totali).
No — non c'è nessuna differenza di sicurezza. Il Base64 non è crittografia, è solo codifica. L'immagine è visibile a chiunque con strumenti base del browser. Il vantaggio di sicurezza degli URL esterni è semmai il contrario: le immagini esterne possono essere aggiornate senza toccare il codice.