Immagine in Base64
Codifica un’immagine come data URI Base64 per CSS o HTML.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
- Dimensione file
- \u2014
- Dimensione codificata
- \u2014
Immagine grande: un data URI così grande appesantisce la pagina. Oltre qualche decina di KB è meglio un file normale.
Elaborata localmente: la tua immagine non lascia il dispositivo.
Codifica un’immagine in Base64 in due secondi
Il data URI permette di incorporare un’immagine direttamente nel codice, senza file esterno. Trascina l’immagine, scegli il formato di uscita, data URI grezzo, proprietà CSS o tag HTML, e copia il risultato.
-
Trascina la tua immagine
PNG, JPG, WebP, GIF, SVG… qualsiasi formato è accettato e mantenuto tale e quale: nessuna ricodifica, nessuna perdita.
-
Scegli l’uscita
Data URI grezzo, background-image CSS pronto da incollare, oppure un tag <img> HTML completo.
-
Copia
Un clic su Copia e il codice è negli appunti, con le dimensioni prima/dopo visualizzate.
Quando usare (ed evitare) il Base64
| Situazione | Data URI? | Perché |
|---|---|---|
| Icona o logo < 10 KB | Sì | Risparmia una richiesta HTTP, visualizzazione immediata |
| E-mail HTML | Sì | Le immagini esterne sono spesso bloccate di default |
| Foto o banner > 100 KB | No | +33 % di peso, niente cache separata, rendering più lento |
| Immagine ripetuta su più pagine | No | Un file normale viene messo in cache una sola volta |
Suggerimento: per le icone vettoriali, l’SVG inline (incollato direttamente nell’HTML) è spesso più leggero e nitido della versione Base64.
Domande frequenti
Che cos’è un data URI?
È un URL che contiene direttamente i dati del file, nella forma data:image/png;base64,iVBOR… Si usa ovunque sia previsto un URL di immagine: attributo src, background-image CSS, favicon…
Perché codificare un’immagine in Base64?
Per incorporare l’immagine direttamente in HTML, CSS o JSON, senza file separato né richiesta HTTP aggiuntiva. Comodo per icone piccole, e-mail HTML o prototipi autonomi.
Il Base64 aumenta la dimensione del file?
Sì, di circa il 33 % rispetto al binario originale. È il prezzo della rappresentazione testuale. La compressione gzip/brotli del server ne recupera una parte, ma per immagini grandi un file normale resta più efficiente.
Fino a che dimensione è una buona idea?
Come regola, riserva il data URI alle immagini sotto qualche decina di KB (icone, loghi, piccoli pattern). Oltre, gonfia le pagine, impedisce la cache separata e rallenta il rendering.
La mia immagine viene inviata da qualche parte?
No. Lettura e codifica avvengono tramite l’API FileReader del tuo browser. L’immagine non lascia mai il tuo dispositivo.