Base64 e imagen
Convierte una imagen a Base64 y viceversa.
Cómo funciona convertir una imagen a Base64
Base64 permite representar el contenido binario de una imagen como texto plano, así que se puede incrustar directamente dentro de HTML, CSS o JSON sin necesidad de un archivo aparte. En el sentido "Imagen → Base64", la herramienta lee tu archivo con la API FileReader del navegador y genera un Data URI completo (el formato data:image/png;base64,... que cualquier navegador reconoce directamente), además del Base64 puro sin ese prefijo.
En el sentido "Base64 → Imagen", pega un Data URI completo o solo el Base64 (indicando el formato con el selector) y la herramienta reconstruye la imagen para previsualizarla y descargarla como archivo.
Se usa para incrustar un icono pequeño directamente en el CSS con background-image: url(data:...) y ahorrar una petición HTTP, guardar una imagen como texto dentro de un JSON o una base de datos, o depurar un Data URI que te ha devuelto una API. Todo ocurre en tu navegador: la imagen no se sube a ningún servidor.
Ejemplo práctico
Un icono PNG de 2 KB se convierte en una cadena Base64 de aproximadamente 2,7 KB de texto: el Base64 siempre pesa alrededor de un 33% más que el archivo binario original, por eso no compensa para imágenes grandes.
Preguntas frecuentes
¿Por qué el Base64 pesa más que el archivo de imagen original?
Porque cada 3 bytes originales se representan con 4 caracteres Base64, así que el resultado en texto pesa aproximadamente un 33% más que el archivo binario de partida.
¿Qué diferencia hay entre "Data URI" y "Base64 puro"?
El Data URI incluye el prefijo data:tipo;base64, que le dice al navegador cómo interpretar los datos. El Base64 puro es solo los datos, sin esa información, así que hay que indicar aparte de qué formato es la imagen.
¿Cuándo conviene incrustar una imagen en Base64 en vez de enlazarla como archivo?
Sobre todo para iconos muy pequeños, donde ahorrar una petición HTTP extra compensa. Para imágenes grandes no suele compensar: el Base64 pesa más y, al ir incrustado en el HTML o CSS, el navegador no puede cachearlo por separado.
¿Funciona con SVG?
Sí, aunque al ser un SVG texto plano también se puede incrustar directamente sin pasar por Base64 (usando codificación de URL), lo que normalmente pesa algo menos.