Convertir imagen a Base64

Cómo convertir una imagen a Base64

1. Arrastra la imagen al recuadro. El resultado aparece al instante.
2. Elige el formato: Data URI (para usar en un atributo src), solo Base64 (para APIs y JSON), o un fragmento listo de HTML, CSS o Markdown.
3. Copia el texto o descárgalo como archivo .txt.

Para decodificar, pega el texto en la segunda sección. Si no lleva el prefijo data:, el tipo de imagen se detecta por sus primeros bytes (la «firma» del archivo: PNG empieza por 89 50 4E 47, JPG por FF D8 FF, GIF por GIF…).

Cómo funciona Base64

Base64 representa datos binarios usando solo 64 caracteres seguros (A–Z, a–z, 0–9, + y /). Toma los bytes de 3 en 3 (24 bits) y los reparte en 4 grupos de 6 bits, cada uno convertido en un carácter. Por eso el resultado siempre ocupa 4/3 del original, es decir, un 33 % más, más el relleno con = al final cuando el número de bytes no es múltiplo de 3.

Caracteres Base64 = 4 × ⌈bytes ÷ 3⌉

Ejemplo: un icono PNG de 3000 bytes se convierte en 4 × 1000 = 4000 caracteres. Un data URI añade además el prefijo, por ejemplo data:image/png;base64, (22 caracteres). Si necesitas codificar texto en lugar de imágenes, usa el codificador Base64 de texto.

Cuándo conviene incrustar imágenes en Base64

• Sí: iconos y gráficos muy pequeños (menos de 2–5 KB) en CSS, correos HTML con imágenes que deben verse sin descargar nada, archivos HTML autocontenidos, fixtures de pruebas y APIs que reciben imágenes como texto en JSON.
• No: fotos y gráficos grandes en webs. El navegador no puede guardarlas en caché por separado, aumentan el tamaño del HTML o del CSS (que bloquean la carga de la página) y ocupan un 33 % más. Con HTTP/2 y HTTP/3, pedir archivos separados ya no es caro.

Ejemplos de uso

HTML: <img src="data:image/png;base64,iVBORw0…" width="64" height="64" alt="Logo">. La herramienta añade el ancho y el alto reales para evitar saltos de diseño.

CSS: .icono { background-image: url("data:image/svg+xml;base64,PHN2Zy…"); }

JSON para una API: {"imagen": "iVBORw0KGgo…"}, normalmente sin el prefijo, que es lo que da la opción «Solo Base64».

Si la imagen pesa demasiado para incrustarla, redúcela antes con redimensionar imagen o comprimir imagen. Para codificar caracteres especiales en direcciones web, usa codificar URL.