Imagen a Base64
URI de datos
Sube una imagen y conviértela a URI de datos Base64 para incrustar directamente en HTML, CSS o JavaScript sin peticiones HTTP adicionales.
Esta conversión se ejecuta solo en tu navegador; no se sube nada.
Arrastra una imagen o elige abajo
PNG, JPEG, GIF, SVG, WebP · máx. 10 MB
Para Base64 de texto UTF-8 (no imágenes), usa Codificador y decodificador Base64
¿Qué es esta herramienta?
Lee una imagen local con FileReader y genera un data URI (data:image/…;base64,…) o Base64 puro (solo el payload). La vista previa confirma el archivo antes de copiar.
Útil para iconos pequeños, demos autocontenidas y fixtures de prueba. Base64 crece ~⅓ y evita la caché por URL: las fotos grandes van a un CDN u host estático, no dentro de HTML o email.
Máximo 10 MB. Si debes incrustar, optimiza por debajo de unos cientos de KB.
Casos de uso comunes
- Armar un
srcdeimgobackground-image: url(…)sin petición extra - Insertar un logo pequeño en email o firma HTML (mira el tamaño total)
- Crear fixtures Base64 para tests sin subir binarios al repo
Cómo usar
- Arrastra una imagen o elige archivo (PNG, JPEG, GIF, SVG, WebP · máx. 10 MB).
- Revisa la vista previa y chips MIME / tamaño.
- Elige Data URI o Base64 puro y Copia.
- Sample carga un PNG 1×1; Clear reinicia.
Ejemplos
| Uso | Forma | Notas |
|---|---|---|
| Imagen HTML | <img src="data:image/png;base64,…" alt=""> | Pestaña Data URI; iconos pequeños. |
| Fondo CSS | background-image: url("data:image/svg+xml;base64,…") | SVG suele comprimir bien. |
| Campo API | Solo Base64 sin data: | Pestaña Raw. |
| Foto grande en email | URL alojada, no Base64 | Límite de tamaño del cliente. |
Errores prácticos
- Tamaño de email: Base64+MIME puede superar límites de Gmail/Outlook; aloja fotos e incrusta solo micro-iconos.
- Los data URI grandes aumentan memoria y coste de render; la UI avisa sobre ~500 KB.
- Solo imágenes. El Base64 de texto UTF-8 es otra herramienta.
Referencias
Última revisión: 2026-07-27
Preguntas frecuentes
- ¿En qué se diferencian Data URI y Base64 puro?
- Un data URI es `data:image/png;base64,…` y va directo a `src` o CSS `url()`. El Base64 puro es solo los bytes tras la coma, útil cuando una API no quiere el prefijo `data:`.
- ¿Debo incrustar imágenes grandes en email o HTML?
- Suele ser mala idea. Base64 crece ~⅓ y muchos clientes de correo limitan el tamaño. Prefiere URLs alojadas para fotos; reserva el inline a iconos pequeños.
- ¿Se sube la imagen al servidor?
- No. FileReader del navegador la lee localmente; no sale de tu dispositivo.
- ¿Sirve para plantillas de correo en español?
- Sí para iconos pequeños. Evita fotos grandes: el Base64 hincha el mensaje y puede chocar con límites del cliente.