Qué es un data URI
Es una forma de meter un fichero dentro del propio código, en vez de enlazarlo: data:image/png;base64,iVBORw0….
El navegador lo lee como si fuera una URL, así que sirve en cualquier sitio donde iría la dirección de una imagen:
el src de una <img>, un url() de CSS o un campo de un JSON.
Cuándo compensa (y cuándo no)
Base64 ocupa un 33 % más que el fichero original y no se puede guardar en caché por separado: si la imagen está en el CSS, se descarga de nuevo cada vez que cambia el CSS. Compensa para:
- Iconos y adornos pequeños, de menos de unos pocos KB, que se usan en todas las páginas.
- Correos HTML y documentos de un solo fichero, donde no puedes enlazar recursos externos.
- Vistas previas diminutas (LQIP) que se muestran mientras carga la imagen buena.
- Pruebas y prototipos que tienen que funcionar sin conexión.
Para fotos y para cualquier imagen grande es mejor un fichero normal, con loading="lazy" y en WebP o AVIF.
SVG: mejor sin Base64
Un SVG es texto, así que puede ir en el data URI casi tal cual, escapando solo unos pocos caracteres. Esa versión «URL-encoded» ocupa bastante menos que en Base64 y sigue siendo legible. Cuando conviertes un SVG, la herramienta te deja elegir.
Privacidad
La conversión se hace con la API FileReader del navegador: la imagen no se sube a ningún servidor. El
botón de prueba descarga un placeholder del generador de ximg.es, como
https://ximg.es/64x64/2563eb/fff, y lo convierte igual que si fuera tuyo.