Cómo convertir una imagen a un data URI Base64
Incrusta iconos y marcas de agua pequeños directamente en HTML, CSS, JSON o plantillas de correo como Base64 — sin petición HTTP extra ni activos perdidos.
Más utilidades que combinan bien con esta guía:
Por qué importa
Un correo transaccional necesita un logo pequeño. Enlazar una imagen remota funciona hasta que el cliente bloquea cargas remotas «por privacidad». La solución: incrustar el logo como URI data:image/png;base64,.... El coste es +33 % de tamaño, pero para activos diminutos (menos de 4 KB) el ahorro en latencia y la garantía de que se renderiza compensan. El mismo truco sirve para favicons inline, fondos CSS y sprites SVG en generadores de sitios estáticos.
Tres escenarios reales
Codifica el logo 80×80, coloca el data URI en el src del <img>.
Sin aviso de «cargar imágenes remotas»
background-image: url(data:image/svg+xml;base64,...) mantiene el bundle autocontenido.
Una petición de red menos
Codifica la miniatura, incrusta en JSON; el cliente renderiza sin fetch adicional.
Una sola ida y vuelta
Guía paso a paso
Abre la herramienta Imagen a Base64.
Suelta la imagen
PNG, JPEG, WebP, GIF, SVG, ICO. La herramienta lee el archivo vía File API del navegador.
Elige el formato de salida
Data URI completo (
data:image/png;base64,...) — parasrco CSS. Base64 crudo — para campos JSON donde el prefijo lo gestiona el servidor.Elige codificación segura para URL
Base64 estándar con
+/funciona en HTML/CSS. Segura para URL (-_) ayuda cuando el valor va en query string o nombre de archivo.Copia o descarga
El texto de salida también está disponible como
.txtpara cadenas muy largas.
Fuente
icon.svg (412 bytes)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z"/>
</svg>Data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMMiAyMmgyMEwxMiAyeiIvPjwvc3ZnPg==
Consejos útiles
- Incrusta solo activos pequeños (≤ 4 KB). Imágenes grandes hinchan HTML, CSS o JSON más de lo que ahorras en la petición.
- Prefiere SVG inline para iconos. SVG comprime bien en Base64 y escala sin pérdida.
- Para CSS usa la forma
url().background: url(data:image/png;base64,...)tiene soporte universal. - Para correo, prueba en clientes reales. Outlook en Windows historicamente tuvo soporte peculiar de data URI; Gmail y Apple Mail modernos lo manejan bien.
Trampas comunes
Error frecuente
La URI resultante supera límites de caracteres en CSS
Algunos parsers CSS antiguos fallan con líneas multimegabyte. Mueve imágenes grandes a CDN; incrusta solo lo diminuto.
Error frecuente
URI rota en JSON por "/" dentro del data URL
JSON no exige escapar /, pero algunos editores lo escapan solo. Codificar en Base64 seguro para URL evita el problema.
Error frecuente
Imágenes inline en correo HTML rotas por conflicto CID
Algunos clientes prefieren referencias cid: sobre data:. Prueba en el cliente objetivo; ofrece ambas como respaldo si hace falta.
Cuándo no es la herramienta adecuada
- Incrustación masiva en servidor durante build — usa
url-loaderde Webpack o el sufijo?inlinede Vite. - Procesamiento de imagen antes de codificar — comprime primero con el Compresor de imágenes.
- Imágenes muy grandes — subir 5 MB en Base64 en un cuerpo JSON es derroche; sirve el archivo vía URL de CDN.
Preguntas frecuentes
¿Cuál es la penalización de tamaño?
Base64 infla ~33 %. Un PNG de 1 KB pasa a ~1,37 KB como data URI.
¿Los navegadores cachean una imagen incrustada?
No — cada página que usa el data URI vuelve a parsear los bytes. Por eso incrustar solo tiene sentido para activos diminutos.
¿Se sube mi imagen?
No. El codificador lee el archivo localmente y escribe la cadena directamente.
Próximos pasos
- Dirección inversa — pega un data URI de vuelta a archivo con Base64 a imagen.
- Comprime antes de codificar para tamaño mínimo: Compresor de imágenes.
- Convierte formatos con el Convertidor de imágenes cuando el destino exija solo JPEG.