Un Data URI incorpora il contenuto di un file direttamente in HTML, CSS o JS come data:[tipo];base64,[dati], senza una richiesta HTTP separata. In Italia questa tecnica si scontra spesso con una particolarità della PEC (Posta Elettronica Certificata): molti gestori PEC filtrano o alterano i contenuti HTML dei messaggi per motivi di certificazione legale, e le immagini incorporate come Base64 vengono trattate in modo ancora meno prevedibile delle immagini con link esterno.
Perché nella posta certificata conviene diffidare delle immagini incorporate
Il valore legale della PEC dipende dal fatto che il contenuto del messaggio resti verificabile e invariato: per questo motivo molti client e gestori PEC sono più restrittivi verso contenuti HTML complessi, compresi i blocchi Base64 di grandi dimensioni, che alcuni filtri antispam associano a tecniche di offuscamento. Nella posta ordinaria il problema non si pone, ma vale la pena saperlo prima di usare Data URI in comunicazioni che devono restare certificate.
Vantaggi
- Meno richieste HTTP — utile per piccole icone o immagini di sfondo in un'applicazione web.
- Il file è "attaccato" al documento e non si rompe se cambia un percorso CDN.
- Comodo per segnaposto che devono apparire immediatamente, prima che l'immagine reale si carichi.
Limiti
- Base64 aumenta la dimensione dei dati di circa un terzo rispetto al file binario.
- Un Data URI grande appesantisce il file HTML/CSS stesso e non può essere messo in cache separatamente dalla pagina.
- Per immagini grandi o riutilizzate spesso, un file separato con cache è quasi sempre più efficiente nelle visite ripetute.
SVG come testo, non Base64
A differenza dei formati raster, SVG è testo (XML), quindi non è necessario codificarlo in Base64: basta effettuare correttamente l'escape dei caratteri speciali tramite percent-encoding (data:image/svg+xml,%3Csvg...). Questa soluzione resta più leggera e modificabile come semplice testo direttamente in un file CSS versionato.