Convertitore da Immagine a Base64
Converti un'immagine in un data URI Base64, oppure incolla un data URI per visualizzarne l'anteprima e scaricarlo. Entrambe le direzioni funzionano interamente nel tuo browser — nulla viene mai caricato.
Base64 byte per byte, non una copia ricodificata
La codifica legge il tuo file con FileReader.readAsDataURL(file), che rappresenta i
byte originali esatti del file come testo Base64 — niente viene
decodificato, ricompresso o ridisegnato, a differenza di far
passare l'immagine da un canvas. La decodifica inverte
semplicemente il processo: il testo che incolli diventa
direttamente il src di un elemento <img>, e il browser lo decodifica di nuovo in
pixel per l'anteprima.
Esempio pratico: perché il Base64 è circa il 33% più grande
Il Base64 converte ogni 3 byte di input in 4 caratteri di
output, ciascuno tra 64 simboli possibili (A–Z, a–z, 0–9, +, /). Tre byte grezzi, ad esempio [0xF0, 0x9F, 0x98], diventano esattamente la
stringa di 4 caratteri 8J+Y. Quel rapporto fisso di
3 in, 4 out è esattamente 4/3, quindi un PNG da 300 KB diventa
circa 400 KB di testo Base64 — questo strumento calcola e mostra
la percentuale reale per il tuo file specifico invece di una
regola generica arrotondata.
Domande frequenti
Perché usare FileReader invece del canvas, come fa il convertitore di formato?
Perché questo strumento deve preservare il file esattamente com'è. Disegnare un'immagine su un canvas la decodifica in pixel grezzi e poi li ricodifica — per un formato con perdita questa è una vera ricompressione, e anche per il PNG può cambiare i byte esatti (codificatore diverso, metadati diversi). FileReader.readAsDataURL() invece legge direttamente i byte originali del file e li rappresenta in Base64, quindi ciò che ottieni è esattamente lo stesso file, byte per byte, solo ricodificato come testo.
Perché il testo Base64 è più lungo del file originale?
Il Base64 rappresenta ogni 3 byte di dati binari come 4 caratteri di testo, ciascuno tratto da un alfabeto di 64 caratteri — quindi il testo codificato è sempre circa 4/3 della dimensione originale, all'incirca il 33% in più. Questo sovraccarico è il prezzo per rappresentare dati binari arbitrari usando solo lettere, numeri e un paio di simboli, il che è ciò che lo rende sicuro da incorporare ovunque sia previsto testo semplice, come un background-image CSS o un campo JSON.
Cosa succede se incollo Base64 grezzo senza il prefisso data:?
Questo strumento rileva che il testo incollato non inizia con data: e antepone automaticamente data:image/png;base64, prima di provare a visualizzarlo. Se l'immagine è in realtà un JPEG o WebP, la maggior parte dei browser attuali la mostrerà comunque correttamente perché controllano la firma reale del file nei byte invece di fidarsi del tipo dichiarato — ma per la massima accuratezza, incolla il data URI completo (con il tipo mime corretto) invece della sola parte Base64.
Perché vedo 'non è un'immagine valida' invece di un'icona di immagine rotta?
Impostare dati non validi come src di un elemento <img> normalmente ti lascia davanti a un'icona di immagine rotta senza spiegazioni. Questo strumento intercetta l'evento onerror dell'immagine stessa e lo sostituisce con un messaggio chiaro e diretto — così una stringa corrotta, un incollaggio incompleto o del testo normale incollato per errore ricevono tutti una spiegazione semplice invece di un vicolo cieco.
Quello che incollo o carico qui viene inviato a un server?
No. La codifica usa FileReader interamente all'interno del tuo browser, e la decodifica imposta il src di un elemento <img> direttamente sul testo che hai digitato — nessuno dei due passaggi tocca mai una richiesta di rete. Questo vale per ogni strumento di questo sito.