Convertidor de imagen a Base64

Cómo convertir una imagen a Base64

1. Suelta una imagen en el recuadro, pégala desde el portapapeles con Ctrl+V (Cmd+V en Mac) o usa el selector de archivos. Las capturas de pantalla pueden ir directamente desde el portapapeles; también puedes usar varios archivos a la vez.
2. Si quieres, redúcela o conviértela antes: escribe un Ancho máx. en píxeles, elige PNG, JPEG o WebP en Convertir a, ajusta la Calidad o marca Quitar metadatos (EXIF).
3. Elige un formato en Salida como. Esta página empieza en Data URI.
4. Pulsa Copiar salida, o Guardar como .txt para resultados largos.

La vista previa muestra el nombre del archivo, el tamaño, el tipo MIME y las dimensiones en píxeles. Bajo los botones ves el tamaño de la entrada, el de la salida y la sobrecarga en porcentaje, para que sepas qué vas a pegar.

Formatos de salida y dónde se usan

Los datos Base64 son los mismos en todos los formatos; solo cambia el envoltorio. Los ejemplos de abajo usan un PNG de 32×32 llamado logo.png, acortado:

La salida <img> incluye width y height, lo que permite al navegador reservar el espacio antes de decodificar la imagen. Algunos renderizadores de Markdown, sobre todo en plataformas alojadas, eliminan las URL data: de las imágenes, así que compruébalo en el tuyo antes de depender de la salida Markdown.

Redimensiona y convierte antes de codificar

Base64 añade un tercio al tamaño de lo que le des, así que la mejor forma de conseguir una cadena corta es una imagen más pequeña. Una foto de teléfono mostrada como miniatura de 300 píxeles no necesita sus 4000 píxeles originales. Poner Ancho máx. en 600, el doble del tamaño en pantalla para que se vea nítida en pantallas de alta densidad, ahorra mucho más que cualquier truco de codificación.

Qué hacen las opciones:

• Ancho máx. solo reduce. Las imágenes más estrechas mantienen sus dimensiones, y la relación de aspecto siempre se conserva.
• Convertir a JPEG rellena de blanco las zonas transparentes, porque JPEG no tiene canal alfa. Usa WebP si necesitas transparencia y tamaño reducido a la vez.
• Calidad se aplica a la salida JPEG y WebP siempre que alguna de las otras opciones provoque una recodificación. PNG no tiene pérdidas y la ignora.
• Quitar metadatos (EXIF) elimina los datos de la cámara, como las coordenadas GPS, el modelo del dispositivo y la hora de captura. Funciona redibujando la imagen, así que un JPEG se vuelve a comprimir con la calidad elegida.
• GIF, BMP y AVIF se escriben como PNG al recodificarse con Mantener formato, porque los navegadores no pueden generar esos formatos desde un canvas. Un GIF animado conserva solo su primer fotograma.
• Safari no puede codificar WebP. Si eliges WebP allí, la herramienta te avisa de que generó PNG en su lugar.
• Los archivos SVG se codifican tal cual. Ya son texto, y rasterizar un vector anularía su sentido.

Un PNG que ya pasó por un optimizador puede salir más grande tras recodificarlo. La vista previa muestra el tamaño nuevo junto al original, así que compáralos antes de copiar.

Cuándo incrustar una imagen y cuándo no

Un data URI ahorra una petición HTTP y lo mantiene todo en un archivo. Eso compensa para:

• iconos, logotipos y pequeños gráficos de interfaz de unos pocos kilobytes,
• documentos HTML de un solo archivo, como informes, documentación offline o paneles exportados,
• diminutos placeholders difuminados que se muestran mientras carga la imagen real,
• fixtures de prueba y cargas JSON en las que un archivo aparte resulta incómodo.

Juega en tu contra con fotos y con cualquier cosa grande. La copia codificada ocupa alrededor de un 33 % más, no se puede guardar en caché por separado del HTML o CSS que la contiene y se descarga de nuevo en cada página que la incrusta. Una imagen dentro de una hoja de estilos además retrasa la hoja de estilos, y con ella el renderizado. loading="lazy" tampoco ayuda: los bytes ya están en el documento. Hay más detalle en el rendimiento de los data URI, y la calculadora de tamaño muestra el tamaño codificado antes de decidirte.

El correo es un caso aparte. Gmail y otros clientes de webmail no muestran en absoluto imágenes en data URI, así que los boletines suelen usar imágenes alojadas o adjuntos CID. Consulta Base64 en el correo electrónico.

Imágenes para API y modelos de visión de IA

JSON no tiene tipo binario, así que las API que reciben una imagen en el cuerpo de la petición esperan Base64. Eso incluye muchos modelos de IA multimodales capaces de describir, clasificar o leer el texto de una imagen. La imagen se envía de una de estas dos formas:

• un data URI completo en una sola cadena: data:image/jpeg;base64,/9j/4AAQ...
• Base64 sin más en un campo, con el tipo de medio (image/jpeg) en otro.

Usa Data URI para la primera y Base64 simple para la segunda. Enviar el prefijo data: a una API que espera Base64 sin más, o al revés, es un motivo frecuente de rechazo de estas peticiones. Estos servicios suelen limitar el tamaño de la petición y a menudo reducen las imágenes grandes por su cuenta, así que redimensionar antes de codificar mantiene la petición pequeña a bajo coste.

Formatos de imagen que puedes incrustar

HEIC y TIFF se codifican sin problema, pero un data URI de cualquiera de los dos muestra una imagen rota en Chrome y Firefox. Las páginas de HEIC y TIFF explican qué hacer en su lugar. Para más firmas, consulta prefijos Base64 habituales.

Lo mismo en código

En el navegador, FileReader devuelve directamente un data URI:

function imageToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

En Python, lee los bytes y añade tú el prefijo:

import base64, mimetypes

def to_data_uri(path):
    mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
    with open(path, "rb") as f:
        return f"data:{mime};base64,{base64.b64encode(f.read()).decode()}"

Hay más variantes, incluido el procesamiento en streaming de archivos grandes, en Base64 en JavaScript y Base64 en Python.

Cuando la imagen no aparece

• Imagen rota en HTML. Desmarca URL-safe (- _) para los data URI. Los navegadores decodifican las URL data: solo con el alfabeto estándar, y un - o _ en lugar de + o / rompe la imagen.
• Funciona en HTML, falla en CSS. Ajustar a 76 mete saltos de línea en la cadena. Los atributos HTML los toleran, pero un salto de línea dentro de una cadena url("...") de CSS invalida la regla. Deja el ajuste desactivado salvo para cuerpos de correo.
• Prefijo duplicado. Una cadena que empieza por data:image/png;base64,data:image/png;base64, viene de pegar un data URI en una plantilla que añade su propio prefijo. Usa ahí Base64 simple.
• Imagen equivocada o ninguna imagen tras decodificar. Compara los primeros caracteres con la tabla de arriba. Si el inicio no coincide con el formato, la cadena se cortó o se mezcló con otra. Base64 a imagen muestra qué son realmente los bytes.

Preguntas frecuentes