Què és un data URI
És una manera de posar un fitxer dins del mateix codi, en lloc d’enllaçar-lo: data:image/png;base64,iVBORw0….
El navegador el llegeix com si fos un URL, així que serveix a qualsevol lloc on aniria l’adreça d’una imatge: el
src d’una <img>, un url() de CSS o un camp d’un JSON.
Quan surt a compte (i quan no)
Base64 ocupa un 33 % més que el fitxer original i no es pot desar a la memòria cau per separat: si la imatge és al CSS, es torna a descarregar cada vegada que canvia el CSS. Surt a compte per a:
- Icones i ornaments petits, de menys d’uns quants KB, que es fan servir a totes les pàgines.
- Correus HTML i documents d’un sol fitxer, on no pots enllaçar recursos externs.
- Vistes prèvies diminutes (LQIP) que es mostren mentre es carrega la imatge bona.
- Proves i prototips que han de funcionar sense connexió.
Per a fotos i per a qualsevol imatge gran és millor un fitxer normal, amb loading="lazy" i en WebP o AVIF.
SVG: millor sense Base64
Un SVG és text, així que pot anar al data URI gairebé tal qual, escapant només uns quants caràcters. Aquesta versió «URL-encoded» ocupa força menys que en Base64 i continua sent llegible. Quan converteixes un SVG, l’eina et deixa triar.
Privadesa
La conversió es fa amb l’API FileReader del navegador: la imatge no es puja a cap servidor. El botó de prova
descarrega un placeholder del generador d’ximg.es, com https://ximg.es/64x64/2563eb/fff,
i el converteix igual que si fos teu.