CodeKitHubChe cos'è questo strumento?
Base64 è un metodo per rappresentare dati binari — come i byte grezzi di un'immagine — sotto forma di testo semplice, utilizzando solo lettere, cifre e pochi simboli. Trattandosi di testo semplice, un'immagine codificata in Base64 può essere incorporata direttamente all'interno di codice HTML, CSS o JSON, anziché essere richiamata come file separato.
Un "URL di dati" racchiude quel testo in Base64 in un breve prefisso (data:image/png;base64,) che indica al browser di che tipo di file si tratta, in modo che possa essere inserito direttamente in un attributo src o url() e visualizzato senza alcuna richiesta aggiuntiva.
Perché usarlo?
- Ottieni entrambi i formati contemporaneamente: l'URL completo dei dati per HTML/CSS e il codice Base64 grezzo (senza prefisso) da incorporare in file JSON o di configurazione.
- Nessun round-trip con il server: elimina una richiesta HTTP per icone di piccole dimensioni, avatar o immagini incorporate.
- Conserva esattamente i byte del file originale — senza ricodifica né perdita di qualità, a differenza degli strumenti che decodificano e salvano nuovamente l'immagine.
- Mostra la differenza di dimensioni, così puoi capire cosa stai sacrificando in cambio della praticità.
- Privato: il file viene letto localmente tramite l'API FileReader del browser e non lascia mai il tuo dispositivo.
Come si usa
- Fai clic sull'area di caricamento oppure trascina un file immagine su di essa.
- Copia l'URL completo dei dati se intendi incollarlo in un tag <img src> o in un'immagine di sfondo CSS.
- Copia il codice Base64 grezzo (senza il prefisso "data:") se intendi incorporare il valore all'interno di JSON, YAML o un altro formato di configurazione che riconosce già il tipo di file.
- Controlla la nota sulle dimensioni: il testo in Base64 occupa circa un terzo in più rispetto al file binario originale.
Esempio
Input
A 12 KB PNG icon file.Risultato
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB of text) plus the same string without the data: prefix.L'aumento di dimensioni di circa il 33% è intrinseco alla codifica Base64 (3 byte di dati binari diventano 4 caratteri di testo) — non si tratta di un bug dello strumento.
In quali contesti viene utilizzato ciascun formato
| Formato | Uso tipico |
|---|---|
| URL completo dei dati | HTML <img src="...">, CSS background-image: url(...), immagini incorporate nelle e-mail |
| Base64 non codificato | Payload delle API JSON, file YAML/di configurazione, campi BLOB dei database, protocolli binari personalizzati |
Base64 e dimensioni delle immagini: il compromesso nella pratica
Il sovraccarico di circa il 33% implica che l’incorporamento in Base64 sia da riservare alle risorse di piccole dimensioni: un'icona da 2 KB diventa un innocuo testo in linea di circa 2,7 KB, ma una foto da 500 KB diventa circa 665 KB di testo inserito direttamente nel codice HTML, il che rallenta l'analisi e non può essere memorizzato nella cache separatamente dalla pagina.
Se stai incorporando molte immagini o immagini di grandi dimensioni, valuta il vantaggio di risparmiare una richiesta rispetto al costo in termini di peso della pagina — e valuta la possibilità di comprimerle prima.
→ Codificatore/Decodificatore Base64 · Compressore di immagini
Domande frequenti
Perché la stringa Base64 è molto più grande del mio file immagine?
La codifica Base64 converte ogni 3 byte di dati binari in 4 caratteri di testo, il che comporta un sovraccarico di dimensione fisso pari a circa il 33%. Per un'immagine da 100 KB, ci si può aspettare un testo Base64 di circa 133 KB. Si tratta di un fenomeno normale e inevitabile: è il prezzo da pagare per rappresentare i dati binari sotto forma di testo sicuro e portabile.
Qual è la differenza tra l'URL dei dati e la stringa Base64 non elaborata?
L'URL dei dati include il prefisso "data:image/png;base64", che indica al browser o al renderer a quale tipo MIME viene decodificato il testo che segue. Incolla l'URL dei dati completo in un attributo src HTML o in una funzione url() CSS. Il codice Base64 grezzo (tutto ciò che segue la virgola) è ciò che serve quando un sistema conosce già separatamente il tipo di file — ad esempio un campo JSON come { "format": "png", "data": "<codice Base64 grezzo>" }.
Quando è opportuno incorporare un'immagine in formato Base64 invece di inserire un link al file?
L'incorporamento in Base64 è utile per immagini di piccole dimensioni e di uso frequente (icone, loghi, piccoli elementi grafici dell'interfaccia utente) in cui il risparmio di una richiesta HTTP supera la penalizzazione in termini di dimensioni pari a circa il 33%, oppure in contesti in cui un file separato non è pratico, come nelle e-mail con contenuti incorporati o nelle esportazioni HTML in un unico file. Per le foto di grandi dimensioni o qualsiasi elemento riutilizzato in molte pagine, un normale file collegato con la cache del browser è quasi sempre la soluzione migliore.
La conversione in Base64 modifica o comprime la mia immagine?
No. Base64 è una codifica testuale senza perdita di dati dei byte originali esatti: non interviene sui pixel, sulla risoluzione né sulla compressione. Se vuoi ottenere un file più piccolo, comprimi prima l'immagine con un programma di compressione, poi converti il risultato compresso in Base64.
La mia immagine è stata caricata da qualche parte?
No. Il file viene letto direttamente nel browser tramite l'API FileReader e codificato localmente: non viene mai inviato in rete.