Imagen a Base64
Sube cualquier imagen y conviértela a una data URL Base64 lista para HTML, CSS o JSON — conversor gratuito compatible con PNG, JPEG, SVG y WebP. Sin subida...
Actualizado marzo de 2026
Revisado por Rafael Duarte
Codificación rápida
El procesamiento asíncrono maneja archivos grandes sin bloquear la interfaz.
Procesamiento local
Los assets se codifican en el navegador. Los datos nunca salen de tu máquina.
Soporte de Data URI
Genera directamente formatos listos para CSS, HTML y Data URL.
Cómo convertir una imagen a Base64
Cuatro formatos de salida, un clic para copiar
1. Suelta la imagen
PNG, JPG, GIF, SVG o WebP de hasta 20 MB — arrastra el archivo o haz clic para buscarlo en tu equipo.
2. Elige el formato de salida
Base64 puro, Data URL, etiqueta HTML `<img>` o valor `url()` de CSS.
3. Copia el resultado
Haz clic en Copiar o presiona Shift+Enter para llevarte la cadena codificada.
Qué hace este conversor de imagen a Base64
Va más allá de generar la cadena
Cuatro formatos de salida
Base64 puro, data URL completa, etiqueta <img> lista para pegar o valor url() de CSS.
Muestra los metadatos del archivo
Dimensiones, peso original y peso codificado, todo antes de copiar nada.
Vista previa con zoom
Confirma visualmente la imagen antes de incrustarla en el código.
Todo ocurre en el navegador
Usa la FileReader API — tu imagen nunca sale del dispositivo y la herramienta funciona incluso sin conexión una vez cargada.
Atajos de teclado
Shift+Enter copia el resultado, y Shift+flecha te mueve entre los cuatro conversores Base64 (encode, decode, imagen→Base64 y Base64→imagen) sin tocar el mouse.
Tiempo de procesamiento visible
Un cronómetro en milisegundos mide cuánto tarda la lectura y codificación del archivo — útil para confirmar que una imagen grande no traba el navegador.
Ejemplos
Cuándo vas a necesitar esta herramienta
Los escenarios más frecuentes entre quienes codifican imágenes a Base64
Reducir peticiones HTTP
Iconos y logos pequeños (menos de 5–10 KB) se cargan junto con el HTML o el CSS, sin una petición de red extra.
HTML autocontenido
Demos de un solo archivo, plantillas de correo o documentación offline funcionan sin dependencias externas.
Imágenes en correos electrónicos
Muchos clientes de email bloquean imágenes remotas, pero renderizan sin problema data URLs incrustadas.
Payloads de API
Webhooks y APIs REST que transfieren imágenes suelen esperar una cadena Base64 en el cuerpo de la petición.
Canvas y WebGL
Una cadena Base64 evita las restricciones de CORS que aplican a las imágenes alojadas en otro dominio.
El camino inverso
Para pegar Base64 y ver la imagen resultante, usa [Base64 to Image](/es/tools/base64-to-image).
Dudas y errores comunes
Pegar Base64 puro como si fuera Data URL
La salida Base64 puro no lleva el prefijo data:image/...;base64, — pegarla directo en el src de una <img> o en un url() de CSS produce una imagen rota. Usa la salida Data URL o HTML <img> cuando vayas a pegar directo en el código.
Imagen demasiado pesada para incrustar
Por encima de 20 MB la herramienta rechaza el archivo, y aun por debajo de ese límite una foto grande en Base64 pesa cerca de un 33% más que el original y pierde la caché independiente del navegador. Para imágenes grandes, mejor alójalas aparte.
Seleccionar un archivo que no es una imagen
PDFs, videos y otros documentos disparan un mensaje de error — solo se aceptan formatos image/* (PNG, JPG, GIF, SVG, WebP).
La calidad no cambia
Base64 es una codificación sin pérdida — la cadena representa exactamente los mismos píxeles que el archivo original.
Copiar la etiqueta `<img>` sin completar el `alt`
La salida HTML <img> viene con alt="" vacío por defecto — edítalo con una descripción real de la imagen antes de publicar, o pierdes accesibilidad y una señal de SEO.
Tratar un SVG en Base64 como siempre seguro
Un SVG puede llevar un <script> incrustado. Usado como src de una <img> ese script no se ejecuta, pero si el data URL se abre directo o se usa en <object>/<iframe>, el contenido activo del archivo original se conserva. Reutiliza solo SVG de origen confiable.
Por qué codificar aquí
Toda la conversión ocurre en el navegador con la FileReader API — tu imagen nunca sale del dispositivo, y la herramienta sigue funcionando sin conexión una vez que la página cargó.
Los cuatro formatos de salida ahorran el paso manual de armar a mano la etiqueta <img> o el url() de CSS — copia el formato que necesitas y pégalo directo en tu código.
Forma parte de una familia de cuatro conversores Base64 — encode, decode, imagen→Base64 y Base64→imagen — y puedes moverte entre ellos con Shift+flecha sin soltar el teclado.
Preguntas frecuentes
Usa la salida Data URL y pégala como src de una etiqueta <img>, o elige directamente el formato de salida HTML <img> — la herramienta ya genera la etiqueta completa.
Referencias
Documentación oficial de la API usada para leer archivos de imagen de forma local.
Referencia completa del formato data:image/...;base64,... usado en HTML y CSS.
Especificación original del IETF que define el esquema data: usado por toda salida Data URL generada aquí.
Herramientas relacionadas
- Base64 a Imagen Desarrollador Pega una cadena Base64 o data URL y previsualiza la imagen decodificada al instante — conversor gratuito compatible con PNG, JPEG, WebP, GIF y SVG. Sin...
- Codificador Base64 Desarrollador Codifica cualquier texto a Base64 al instante en tu navegador. Compatible con UTF-8, muestra el recuento de caracteres y el tamaño del payload. Gratis, sin...
- Decodificador Base64 Desarrollador Decodifica strings Base64 a texto plano al instante en tu navegador. Compatible con UTF-8, entrada multilínea y muestra el tamaño del payload.
- Codificador de Entidades HTML Desarrollador Convierte texto a entidades HTML online — escapa caracteres especiales como <, >, & y " al instante en tu navegador.
- Codificador de URL Desarrollador Codifica cualquier URL o texto a percent-encoding al instante en tu navegador. Sigue el estándar RFC 3986. Gratis y sin registro.
