La codifica Base64 trasforma un file binario — come un’immagine — in una lunga stringa di testo composta solo da lettere, numeri e pochi simboli. Questo permette di incorporare l’immagine direttamente nel codice HTML o CSS, senza un file separato. Il convertitore qui sopra produce la stringa pronta all’uso; qui sotto spieghiamo cosa ottieni davvero e, soprattutto, quando conviene e quando no.
Cos’è davvero il Base64
Base64 rappresenta ogni 3 byte di dati con 4 caratteri di testo. La conseguenza pratica è importante: la versione Base64 di un’immagine pesa circa il 33% in più dell’originale. Non è una compressione, ma una ri-codifica: serve a far “viaggiare” dati binari dove è atteso del testo.
Come usare il convertitore
Carica l’immagine: lo strumento restituisce una stringa che inizia con data:image/png;base64, seguita dai dati. La incolli come valore dell’attributo src di un tag img oppure in una proprietà CSS background-image: url(...). Il browser la interpreta come se fosse un file immagine.
Quando conviene usarlo
- Icone e immagini molto piccole (pochi KB) ripetute nel CSS: incorporarle elimina una richiesta HTTP al server.
- Email HTML, dove i file allegati esterni possono essere bloccati dai client di posta.
- Prototipi e file singoli che devono funzionare senza cartelle di immagini collegate.
Quando NON usarlo
- Immagini grandi (foto, banner): il +33% di peso e l’impossibilità di essere messe in cache separatamente rallentano la pagina.
- Immagini usate su più pagine: come file esterno verrebbero scaricate una volta sola e riutilizzate; in Base64 vengono ricaricate in ogni pagina che le contiene.
La regola pratica: Base64 è ottimo sotto i pochi KB, controproducente sopra.
Domande frequenti
Le immagini Base64 sono sicure?
Sì: la conversione avviene nel tuo browser e la stringa contiene solo i dati dell’immagine, senza codice eseguibile. Non c’è invio a server esterni.
Google indicizza le immagini in Base64?
Le immagini incorporate in Base64 non hanno un URL proprio, quindi non compaiono in Google Immagini. Per immagini che vuoi far trovare nelle ricerche, usa file esterni con un buon attributo alt.
Posso riconvertire da Base64 a immagine?
Sì, il processo è reversibile: qualsiasi decoder Base64 ricostruisce il file originale identico, perché nessun dato viene perso nella codifica.
Esempio pratico passo-passo
Supponiamo di avere una piccola icona PNG da 2 KB da usare come sfondo di un pulsante. Convertendola ottieni una stringa che incolli nel CSS così: .btn{background-image:url('data:image/png;base64,iVBORw0KGgo...')}. Il pulsante mostrerà l’icona senza che il browser debba scaricare un file separato — una richiesta HTTP in meno a ogni caricamento della pagina.
Base64 e velocità della pagina
Incorporare risorse in Base64 riduce il numero di richieste al server, ma aumenta la dimensione del file HTML o CSS che le contiene. Per poche icone leggere il bilancio è positivo; per molte immagini o file pesanti diventa negativo, perché tutto il blocco va scaricato prima che la pagina si mostri e non può essere messo in cache separatamente. È un compromesso tra “meno richieste” e “file più grandi”: va valutato caso per caso sui Core Web Vitals.
Formati supportati
La codifica Base64 funziona con qualsiasi formato immagine — PNG, JPEG, WebP, GIF e SVG — perché agisce sui byte del file, indipendentemente dal tipo. Il prefisso della stringa (data:image/png, data:image/jpeg…) indica al browser come interpretare i dati. Per le foto conviene partire da un JPEG o WebP già compresso, così la stringa risultante resta più contenuta.