Conversor de imagen a Base64 (data URI)
Convierte una imagen en un data URI Base64 en tu navegador y copia fragmentos listos de img HTML, fondo CSS y Markdown, con detalles de tamaño.
Se ejecuta completamente en tu navegador. Tus datos nunca se suben.
¿Qué es Imagen a Base64?
Esta herramienta codifica un archivo de imagen en Base64 para incrustarlo directamente en HTML, CSS, JSON o Markdown. Genera el data URI completo (data:image/png;base64,…), la cadena Base64 sin procesar y fragmentos <img>, background-image de CSS y Markdown listos para copiar, además del tamaño de la imagen y el aumento por Base64.
Cómo usar Imagen a Base64
- Suelta, elige o pega una imagen (PNG, JPEG, GIF, WebP, SVG, ICO…).
- Revisa el formato detectado, las dimensiones, el tamaño del archivo y la longitud del data URI.
- Haz clic en Copiar junto a la variante que necesites: data URI, Base64 sin procesar, fragmento HTML, fondo CSS o Markdown.
Ejemplo
PNG de 30×30 relleno de #3366CC (99 bytes)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAKklEQVR4nGM0TjvDQBvARCNzR40eNXrU6FGjR40eNXrU6FGjR40eEUYDACc1AaFANYRxAAAAAElFTkSuQmCC
Cuándo usar Imagen a Base64
Incrusta imágenes diminutas como iconos, logotipos pequeños o placeholders para ahorrar una petición HTTP; incrusta imágenes en HTML de un solo archivo, correos o API JSON, o en CSS que deba ser autocontenido. Evítalo con imágenes de más de unos 20 KB: inflan tu HTML/CSS y no se pueden almacenar en caché por separado.
Cómo funciona Imagen a Base64
Los bytes del archivo se leen con File.arrayBuffer(), el formato real se detecta por sus bytes mágicos (por ejemplo, 89 50 4E 47 para PNG) en lugar de fiarse de la extensión, y los bytes se codifican en Base64 con btoa. El data URI es data:<mime>;base64,<base64>. Base64 representa cada 3 bytes con 4 caracteres, así que el texto es aproximadamente un 33 % más grande que el archivo.
Casos de Uso Comunes
- Incrustar un icono pequeño directamente en un archivo CSS.
- Poner un logotipo en una plantilla de correo HTML o una página offline de un solo archivo.
- Enviar una imagen dentro de un payload JSON a una API.
- Escribir un documento Markdown o Jupyter autocontenido.
Nota de Seguridad
Las imágenes se decodifican, procesan y codifican en local en tu navegador con la API Canvas. No se sube nada a ningún servidor.
Preguntas Frecuentes
¿Por qué el Base64 es más grande que mi archivo?
Base64 usa 4 caracteres de texto por cada 3 bytes, así que la cadena codificada es aproximadamente un 33 % más grande (más unos bytes de relleno y el prefijo del data URI).
¿La herramienta cambia o comprime mi imagen?
No. Codifica los bytes exactos de tu archivo. Usa antes el Compresor de imágenes si quieres un resultado más pequeño.
¿Puedo convertir el Base64 de vuelta en imagen?
Sí, usa la herramienta Base64 a imagen, que acepta un data URI o Base64 sin procesar y te permite descargar el archivo.