Che cos’è un data URI
È un modo per inserire un file nel codice stesso, invece di collegarlo: data:image/png;base64,iVBORw0….
Il browser lo legge come se fosse un URL, quindi funziona ovunque andrebbe l’indirizzo di un’immagine: lo
src di un’<img>, un url() CSS o un campo di un JSON.
Quando conviene (e quando no)
Il Base64 pesa il 33% in più del file originale e non può essere messo in cache separatamente: se l’immagine è nel CSS, viene riscaricata ogni volta che il CSS cambia. Conviene per:
- Icone e decorazioni piccole, sotto qualche KB, usate in tutte le pagine.
- Email HTML e documenti in un solo file, dove non puoi collegare risorse esterne.
- Anteprime minuscole (LQIP) mostrate mentre carica l’immagine vera.
- Test e prototipi che devono funzionare offline.
Per le foto e per qualsiasi immagine grande è meglio un file normale, con loading="lazy" e in WebP o AVIF.
SVG: meglio senza Base64
Un SVG è testo, quindi può entrare nel data URI quasi così com’è, facendo l’escape solo di pochi caratteri. Quella versione «URL-encoded» pesa parecchio meno del Base64 e resta leggibile. Quando converti un SVG, lo strumento ti fa scegliere.
Privacy
La conversione usa l’API FileReader del browser: l’immagine non viene caricata su nessun server. Il pulsante
di prova scarica un placeholder dal generatore di ximg.es, come
https://ximg.es/64x64/2563eb/fff, e lo converte come se fosse tuo.