Un Data URI incrusta el contenido de un archivo directamente en HTML, CSS o JS como data:[tipo];base64,[datos], sin necesidad de una petición HTTP aparte. En mercados donde buena parte de las visitas llegan desde planes de datos móviles limitados —muy habitual en gran parte de Latinoamérica— cada petición HTTP evitada tiene un costo real y medible para quien paga por megabyte consumido.
Menos peticiones, pero un HTML más pesado
Cada ícono incrustado como Data URI ahorra una petición HTTP separada, lo cual importa en una conexión 3G intermitente donde la latencia de ida y vuelta pesa más que el tamaño del archivo en sí. Pero ese ahorro tiene un límite: si se abusa de la técnica, el propio HTML crece tanto que termina descargándose más lento que si las imágenes estuvieran en archivos aparte y cacheados.
Ventajas
- Menos peticiones HTTP — útil para iconos pequeños o imágenes de fondo en conexiones lentas.
- El archivo queda "pegado" al documento y no puede perderse al mover archivos o cambiar de CDN.
- Útil para vistas previas que deben aparecer al instante, antes de que cargue la imagen real.
Limitaciones
- Base64 aumenta el tamaño de los datos en torno a un tercio respecto al archivo binario.
- Un Data URI grande infla el propio archivo HTML/CSS y no se guarda en caché por separado de la página.
- Para imágenes grandes o reutilizadas con frecuencia, un archivo aparte con caché casi siempre resulta más eficiente en visitas repetidas.
SVG como texto, no como Base64
A diferencia de los formatos rasterizados, SVG es texto (XML), así que no hace falta codificarlo en Base64: basta con escapar correctamente los caracteres especiales mediante percent-encoding (data:image/svg+xml,%3Csvg...). Esta variante pesa un poco menos, algo que también cuenta cuando cada kilobyte se nota en la factura de datos.