Come funziona la conversione da immagine a Base64
L'intera conversione avviene nel tuo browser usando la File API e la funzione nativa btoa — non viene scaricata nessuna libreria di codec e nessun server vede l'immagine. Ecco il processo dall'inizio alla fine:
- Trascini o selezioni un'immagine. Il browser la legge come Blob dal tuo disco locale, senza copiare byte verso un server.
- Il file viene letto in blocchi da 1 MB e i byte di ogni blocco vengono aggiunti a una stringa binaria. Il processing a blocchi evita che immagini grandi facciano traboccare lo stack di chiamate di JavaScript.
- La stringa binaria viene passata a btoa, che mappa ogni tre byte in quattro caratteri Base64 dall'alfabeto A–Z, a–z, 0–9, più /.
- Il tipo MIME del file (image/png, image/jpeg, ecc.) viene letto dall'oggetto File e anteposto come prefisso data:, producendo un URI data:image/…;base64,… completo.
- La pagina assembla quattro output da quell'URI — l'URI dati completo, il Base64 grezzo senza prefisso, un tag
pronto da incollare e un frammento CSS background-image — ciascuno con il proprio pulsante di copia.
Perché codificare un'immagine come URI dati?
- Incorporare un piccolo logo o icona come URI dati elimina una richiesta di rete separata, così la pagina o l'email mostra il primo frame un po' prima.
- Una pagina o un foglio di stile con immagini inline è autocontenuto. Funziona offline e puoi copiarlo senza trascinare una cartella di risorse insieme.
- Molti client di posta bloccano per impostazione predefinita le immagini remote collegate. Incorpora un logo in Base64 e compare non appena il messaggio viene aperto, senza necessità di richiesta remota.
- La codifica avviene interamente nel tuo browser, quindi le immagini sensibili non viaggiano mai verso un server di terze parti. Questo riguarda screenshot, scansioni di documenti e diagrammi interni.
Usi comuni delle immagini Base64
Gli URI dati compaiono dove un'immagine è abbastanza piccola da far sì che una richiesta separata costi più dell'inflazione di dimensione del ~33% che Base64 aggiunge. Tre pattern ricorrono costantemente:
- Icone CSS inline: uno sprite o icona da 1–2 KB inserito in un foglio di stile come background-image: url(data:…) così che la regola sia completamente autocontenuta.
- Firme email e newsletter: un logo incorporato come
con URI data: src viene visualizzato anche quando il client blocca le immagini remote.
- Incorporazione nei tool di build: bundler come Webpack e Vite incorporano automaticamente le risorse sotto una soglia di byte, e questo strumento ti permette di vedere esattamente come appare quell'output.
Come appare un'immagine Base64?
Prendi un PNG trasparente 1×1 pixel. I suoi byte grezzi sono solo 67 byte, ma codificato diventa la stringa iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, e l'URI dati completo è data:image/png;base64,iVBORw0KGgo…. Nota che la forma codificata è circa un terzo più grande dell'originale. Questo è il compromesso per rendere i dati binari sicuri da incorporare direttamente nel testo.
La mia immagine viene caricata da qualche parte?
No. La conversione usa la File API del browser e la funzione nativa btoa per codificare l'immagine interamente sul tuo dispositivo. Puoi verificarlo tu stesso: apri gli strumenti di sviluppo del browser, passa al pannello Rete e converti un'immagine — le uniche richieste che vedrai sono il caricamento della pagina e gli annunci. Nulla con forma di immagine viene inviato a un server, il che lo rende sicuro per screenshot, documenti d'identità e diagrammi interni.
Perché l'output Base64 è più grande dell'immagine originale?
Base64 rappresenta ogni tre byte di dati binari con quattro caratteri ASCII, quindi il testo codificato è circa il 33% più grande del file sorgente. L'indicatore di dimensione dell'URI dati su questa pagina mostra la lunghezza esatta inflazionata. Ecco perché gli URI dati hanno senso solo per immagini piccole — incorporare una foto da 2 MB gonfierebbe il tuo HTML o CSS molto più di quanto sarebbe costata una richiesta separata. Come regola empirica, incorpora immagini sotto circa 4 KB e collega a qualsiasi cosa più grande.
Quali formati di immagine posso convertire?
Qualsiasi formato che il tuo browser riconosca come immagine funziona, perché lo strumento legge i byte grezzi invece di decodificare l'immagine. Questo copre PNG, JPEG, GIF, WebP, SVG e BMP. Il tipo MIME viene letto direttamente dal file, quindi il prefisso data: corrisponde sempre al formato reale — un JPEG produce data:image/jpeg e un SVG produce data:image/svg+xml. L'SVG merita una nota speciale: è già testo, quindi per gli SVG un URI dati codificato come URL è spesso più piccolo della versione Base64, sebbene questo strumento emetta la forma Base64 per coerenza.
Trascina un'immagine, copia l'URI dati o il frammento che ti serve, e incollalo nel tuo HTML, CSS o template email. Ogni byte rimane sul tuo dispositivo. Nessun upload, nessun account, nessuna richiesta al server.