WebyTooly

Immagine in Base64

Carica un'immagine e ottieni la sua rappresentazione in Base64, con la variante pronta da incollare in CSS o in un tag img.

Espacio publicitario

Trascina qui la tua immagine o fai clic per sceglierla

Accetta qualsiasi formato di immagine, compresi SVG e GIF

Espacio publicitario

Cos'è il Base64 e quando conviene usarlo

Il Base64 rappresenta dati binari usando solo 64 caratteri stampabili. Ogni 3 byte del file diventano 4 caratteri di testo, quindi il risultato occupa circa il 33 % in più dell'immagine originale.

lunghezza Base64 ≈ ceil(byte ÷ 3) × 4

Leggiamo il file con FileReader.readAsDataURL, che restituisce il binario esatto codificato, senza ricomprimere né toccare i pixel. Per questo il data URI conserva formato e qualità originali.

sovraccarico % = (lunghezza del testo − byte) ÷ byte × 100

Un data URI evita una richiesta HTTP, il che conviene per icone piccolissime incorporate nel CSS. Per immagini grandi è controproducente: gonfia l'HTML o il CSS, non viene messo in cache separatamente e ritarda il rendering.

Esempio pratico

Un'icona PNG da 900 byte diventa circa 1200 caratteri Base64 (33 % in più), che puoi incollare direttamente nel foglio di stile risparmiando una richiesta al server.

Domande frequenti

Il Base64 comprime l'immagine?
No, al contrario: la ingrandisce sempre di circa il 33 %. Serve a incorporare un'immagine dentro un file di testo, non a ridurne il peso.
Quando conviene incorporare un'immagine?
Con icone e motivi di pochi kilobyte usati in tutte le pagine. Oltre i 5-10 KB è di solito meglio un file separato, che viene messo in cache in modo indipendente.
La mia immagine viene alterata?
No. Vengono codificati i byte esatti del file originale, quindi formato, qualità e metadati restano intatti.
Posso usarlo con l'SVG?
Sì, e funziona bene perché gli SVG sono di solito piccoli. L'SVG si può anche incorporare senza codifica, ma il Base64 è l'opzione più compatibile.

Calcolatori correlati