Convertidor de Imagen a Base64 - Codificar y Decodificar en Línea
Convierte imágenes a cadenas Base64 o decodifica Base64 a imágenes. Compatible con PNG, JPG, SVG, GIF y WebP. Procesamiento 100% del lado del cliente.
Arrastra una imagen aquí o haz clic para seleccionar
Compatible con PNG, JPG, SVG, GIF, WebP (máx 10MB)
Las imágenes se procesan completamente en tu navegador. No se sube ningún archivo a ningún servidor.
Preguntas Frecuentes
¿Qué es la codificación de imagen a Base64 y por qué la usaría?
La codificación de imagen a Base64 convierte datos binarios de imagen en una cadena de texto usando el alfabeto Base64 (A-Z, a-z, 0-9, +, /). La cadena resultante se puede incrustar directamente en HTML, CSS o JavaScript como un Data URI (data:image/png;base64,...). Esto elimina una solicitud HTTP separada para cada imagen, lo cual es particularmente beneficioso para imágenes pequeñas como íconos, logos y elementos de UI. También es esencial para plantillas de correo electrónico donde la carga de imágenes externas a menudo está bloqueada.
¿Cómo uso esta herramienta de imagen a Base64?
Para codificar: Selecciona el modo 'Codificar', luego arrastra y suelta una imagen en el área de carga (o haz clic para buscar). La herramienta genera instantáneamente la cadena Base64. Elige tu formato de salida preferido (Raw Base64, Data URI, HTML <img>, CSS Background) y haz clic en el botón de copiar. Para decodificar: Selecciona el modo 'Decodificar', pega una cadena Base64 o Data URI en el área de texto. La herramienta automáticamente la decodifica y muestra la vista previa de la imagen.
¿Mis datos de imagen están seguros? ¿Se suben las imágenes a un servidor?
Tus imágenes están 100% seguras y nunca salen de tu navegador. Toda la codificación y decodificación se realiza del lado del cliente usando la API nativa FileReader del navegador y las funciones atob()/btoa(). No se transmiten datos de imagen, cadenas Base64 ni ninguna información a ningún servidor. Puedes verificarlo revisando la pestaña de Red de tu navegador — no se hacen solicitudes de carga.
¿Qué formatos de imagen son compatibles?
Esta herramienta es compatible con los cinco formatos de imagen web más comunes: PNG, JPEG (JPG), SVG, GIF y WebP. Cada formato se detecta automáticamente por su tipo MIME y se codifica correctamente con el prefijo Data URI apropiado. Los archivos SVG, al ser basados en XML, se codifican particularmente bien y mantienen su calidad vectorial en forma Base64. Los GIF animados preservan su animación cuando se codifican en Base64.
¿Cuál es el exceso de tamaño de la codificación Base64?
La codificación Base64 aumenta el tamaño de los datos aproximadamente un 33%. Esto se debe a que Base64 convierte cada 3 bytes de datos binarios en 4 caracteres ASCII. Por ejemplo, un ícono de 30KB se convierte en aproximadamente 40KB como cadena Base64. Esto hace que la incrustación Base64 sea ideal para imágenes pequeñas (menos de 10-20KB) donde eliminar una solicitud HTTP supera el aumento de tamaño.
¿Cuál es la diferencia entre Raw Base64 y un Data URI?
Raw Base64 es la cadena codificada simple (ej: iVBORw0KGgoAAAA...). Un Data URI lo envuelve con un prefijo de tipo MIME: data:image/png;base64,iVBORw0KGgoAAAA... Necesitas el formato Data URI al incrustar imágenes en HTML <img src>, CSS background-image: url(...), o etiquetas <link> del navegador. Raw Base64 es útil cuando solo necesitas los datos codificados para cargas de API, almacenamiento en base de datos o procesamiento personalizado.
¿Cuándo debo usar imágenes Base64 vs. archivos de imagen regulares?
Usa incrustación Base64 para: íconos y logos pequeños (menos de 10-20KB), páginas HTML de un solo archivo, plantillas de correo electrónico, reemplazo de CSS sprites y alternativas SVG en línea. Usa archivos de imagen regulares para: fotografías grandes, imágenes que se benefician del caché del navegador, imágenes compartidas entre múltiples páginas e imágenes de más de 50KB donde el exceso de tamaño del 33% se vuelve significativo.
¿Puedo decodificar una cadena Base64 que no tiene prefijo Data URI?
Sí. Si pegas una cadena Base64 sin el prefijo data:image/...;base64,, la herramienta intentará decodificarla asumiendo un formato predeterminado (PNG). Para mejores resultados, incluye el prefijo Data URI completo para que la herramienta pueda detectar correctamente el tipo de imagen y establecer la extensión de archivo apropiada al descargar.
Ejemplos de Código
// === Image to Base64 Encoding (Browser) ===
// Encode image file to Base64 Data URI
function imageToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(new Error('Failed to read file'));
reader.readAsDataURL(file);
});
}
// Extract raw Base64 from Data URI
function extractRawBase64(dataUri) {
const commaIndex = dataUri.indexOf(',');
return commaIndex !== -1 ? dataUri.substring(commaIndex + 1) : dataUri;
}
// Format output for different use cases
function formatBase64Output(dataUri, format) {
switch (format) {
case 'raw': return extractRawBase64(dataUri);
case 'html': return `<img src="${dataUri}" alt="" />`;
case 'css': return `background-image: url(${dataUri});`;
default: return dataUri;
}
}
// === Base64 to Image Decoding ===
function base64ToBlob(base64Input) {
let dataUri = base64Input.trim();
if (!dataUri.startsWith('data:')) {
dataUri = `data:image/png;base64,${dataUri}`;
}
const [header, data] = dataUri.split(',');
const mimeMatch = header.match(/data:(.*?);/);
const mimeType = mimeMatch ? mimeMatch[1] : 'image/png';
const byteString = atob(data);
const byteArray = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
byteArray[i] = byteString.charCodeAt(i);
}
return new Blob([byteArray], { type: mimeType });
}
// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
const file = e.target.files[0];
const dataUri = await imageToBase64(file);
console.log('HTML:', formatBase64Output(dataUri, 'html'));
});