Convertir Cualquier Imagen a Base64
La codificación Base64 convierte los datos binarios de una imagen en un string de texto que se puede incrustar directamente en HTML, CSS, JavaScript, JSON o cualquier formato basado en texto. Suelta una imagen en el campo de arriba, selecciona tu formato de salida (Base64 plano, data URI o CSS background) y copia el resultado.
Como Funciona la Conversión de Imagen a Base64
Cuándo un navegador lee un archivo de imagen, procesa un flujo de bytes: bloques de compresión JPEG, fragmentos PNG, nodos XML SVG. Estos bytes contienen valores fuera del rango ASCII imprimible, lo que los hace inseguros para incrustar en documentos de texto.
La codificación Base64 resuelve esto mapeando cada 3 bytes de datos binarios a 4 caracteres de un alfabeto de 64 caracteres (A-Z, a-z, 0-9, +, /). El resultado es un string ASCII puro que cualquier protocolo basado en texto puede transportar sin corruption.
El enfoque FileReader
Esta herramienta usa la API FileReader del navegador:
const reader = new FileReader();
reader.onload = () => {
const dataUri = reader.result;
// dataUri = "data:image/png;base64,iVBORw0KGgo..."
};
reader.readAsDataURL(file);Opciones de Formato de Salida
Base64 plano
El string codificado sin procesar, sin ningun prefijo. Usalo cuando necesites almacenar la imagen en una base de datos, enviarla en una carga de API o pasarla a una función que espera entrada Base64 pura.
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ...Data URI
Un data URI completo con tipo MIME. Usalo en etiquetas HTML <img>, funciones CSS url() o en cualquier lugar donde se espere una URL:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU..." alt="Imagen en línea" />CSS Background
Declaración CSS lista para usar:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...);Cuando Incrustar vs Servir por Separado
En línea (data URI Base64)
Mejor para imagenes menores de 10 KB. Cada imagen en línea elimina una solicitud HTTP pero añade el 33% de sobrecarga Base64 al tamaño del HTML/CSS. La imagen no se almacena en cache por separado, solo como parte del documento contenedor.
Servida por separado
Mejor para imagenes de más de 10 KB. El navegador almacena en cache la imagen por separado usando Cabeceras Cache-Control y ETag. La página HTML permanece pequena. Las imagenes se cargan de forma asincrona sin bloquear la renderización.