Base64 a imagen

Entrada Base640 Personajes

Convierte datos codificados en Base64 en imágenes previsualizables y descargables. Soporta más de 7 formatos comunes como PNG/JPG/WebP/GIF/SVG. Detecta automáticamente el prefijo Data URL y muestra la vista previa directamente en el navegador, ideal para depurar APIs y validar codificaciones.

Relacionado

¿Qué es convertir Base64 a imagen?

Convertir Base64 a imagen es el proceso inverso a la codificación Base64: consiste en restaurar una cadena codificada en Base64 a sus datos binarios originales de imagen (formatos como PNG/JPG/WebP/GIF/SVG, entre otros), permitiendo previsualizarla directamente en el navegador o descargarla como archivo local. Es una herramienta esencial para procesar imágenes devueltas por APIs, recursos incrustados (Data URL) y archivos adjuntos de correo codificados en Base64.

**Principio fundamental:** Base64 codifica datos binarios en 64 caracteres ASCII imprimibles (A-Z, a-z, 0-9, +, /). Convertir a imagen revierte este proceso: la cadena ASCII se transforma de nuevo en el flujo de bytes binarios original, que el navegador interpreta como píxeles de imagen según el tipo MIME especificado (por ejemplo, image/png). Las Data URL (como `data:image/png;base64,iVBORw0KGgo...`) combinan Base64 con un prefijo MIME; la herramienta detecta y procesa este formato automáticamente.

**Casos de uso típicos:** ①Depuración de APIs: muchas APIs devuelven captchas, avatares de usuario o firmas electrónicas directamente como cadenas Base64 que el frontend necesita visualizar;②Desarrollo frontend: los iconos pequeños incrustados como Data URL (CSS background-image: url(data:image/png;base64,...)) se pueden pegar en la herramienta para ver el resultado real;③Restauración de adjuntos de correo: los archivos adjuntos codificados en MIME Base64 se pueden decodificar y guardar como imágenes originales;④Datos de web scraping: las imágenes extraídas en Base64 se pueden decodificar y guardar como archivos locales;⑤Preprocesamiento OCR: decodifica imágenes para usar herramientas de reconocimiento óptico.

**Formatos de imagen soportados:** La herramienta admite todos los tipos MIME de imagen que los navegadores reconocen nativamente: PNG (image/png), JPG/JPEG (image/jpeg), WebP (image/webp), GIF (image/gif), SVG (image/svg+xml), BMP (image/bmp), AVIF (image/avif), ICO (image/x-icon), entre otros. Cada formato utiliza diferentes algoritmos de compresión y escenarios: PNG sin pérdida para iconos y capturas, JPG con pérdida para fotografías, WebP recomendado para navegadores modernos, SVG vectorial para iconos y logotipos.

**Seguridad de la decodificación:** Todas las operaciones de decodificación se realizan en el navegador mediante JavaScript (basado en `atob()` + `TextDecoder` o la API `Blob`). Los datos binarios de la imagen no se suben a ningún servidor. Las cadenas Base64 con información sensible (como avatares de usuario o capturas internas) se pueden procesar con total confianza; todos los datos se eliminan automáticamente al cerrar la página.

Casos de uso

  • Restaurar datos de imagen en Base64 devueltos por APIs a archivos de imagen visualizables y descargables
  • Validar si los recursos de imagen incrustados en el frontend (formato Data URL) están correctamente codificados
  • Confirmar si el contenido Base64 está completo al depurar interfaces de subida de imágenes
  • Guardar imágenes Base64 como archivos locales PNG/JPG para usar en diseños o documentación
  • Decodificar archivos adjuntos de correo codificados en Base64 para restaurar las imágenes originales
  • Restaurar y guardar en disco imágenes en Base64 extraídas mediante web scraping
  • Decodificar Data URL para verificar el renderizado real de iconos SVG
  • Restaurar imágenes Base64 devueltas por interfaces OCR/IA como archivos locales para visualizar

Cómo Usar

  1. Pega los datos de imagen codificados en Base64 (admite con o sin prefijo Data URL, por ejemplo data:image/png;base64,iVBORw0KG...)
  2. La herramienta detecta automáticamente el tipo MIME y decodifica (reconociéndolo en la Data URL o mediante detección por cabecera de contenido)
  3. El panel derecho muestra en tiempo real la vista previa de la imagen, el tamaño del archivo y la información de dimensiones
  4. Haz clic en «Descargar» para guardar como archivo de imagen local, o haz clic derecho en la imagen y selecciona «Guardar imagen como»
  5. Si la decodificación falla, puedes especificar manualmente el tipo MIME o usar la herramienta Base64 Clean para preprocesar

Características

  • Vista previa online: la imagen decodificada se muestra directamente en el navegador sin necesidad de descargarla primero
  • Soporte multiformato: admite más de 7 tipos MIME de imagen comunes como PNG/JPG/WebP/GIF/SVG/BMP/AVIF
  • Detección automática de Data URL: elimina automáticamente el prefijo data:image/png;base64, y extrae el contenido Base64 puro para decodificar
  • Entrada de Base64 puro: admite cadenas Base64 sin prefijo, con posibilidad de especificar el tipo MIME manualmente
  • Descarga de archivos de imagen: permite guardar la imagen decodificada como archivo local PNG/JPG con un clic
  • Estadísticas en tiempo real: muestra en vivo el número de caracteres de entrada y bytes decodificados para evaluar el tamaño de la imagen
  • Detección de errores: indica la ubicación exacta del error cuando falla la decodificación (caracteres Base64 no válidos, longitud incorrecta, falta de coincidencia MIME)
  • Procesado local sin subida: toda la decodificación y vista previa se realiza en el navegador, sin pasar por ningún servidor
  • Compatibilidad bidireccional completa: se combina con la herramienta «Imagen a Base64» para formar un flujo de trabajo de conversión bidireccional completo

Ejemplos de Código

JavaScript: decodificación nativa del navegador + vista previa con Blob URL

javascript

Utiliza las APIs nativas del navegador atob() + TextDecoder + Blob para decodificar Base64 y mostrar la imagen en el navegador.

// Base64 → Imagen (implementación nativa del navegador)
function base64ToImage(base64String, mimeType = 'image/png') {
  // 1. Eliminar el prefijo Data URL (si existe)
  const clean = base64String.replace(/^data:image\/\w+;base64,/, '');

  // 2. Decodificar a cadena binaria con atob() nativo del navegador
  const binary = atob(clean);

  // 3. Convertir a Uint8Array
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }

  // 4. Crear Blob URL para vista previa en etiqueta <img>
  const blob = new Blob([bytes], { type: mimeType });
  const url = URL.createObjectURL(blob);

  // 5. Asignar a img.src para ver la vista previa
  const img = document.createElement('img');
  img.src = url;
  img.onload = () => {
    console.log(`Dimensiones de imagen: ${img.width}x${img.height}`);
    console.log(`Tamaño de archivo: ${bytes.byteLength} bytes`);
  };

  return { img, url, size: bytes.byteLength };
}

// Ejemplo de uso:
const result = base64ToImage('iVBORw0KGgoAAAANSUhEUgAAAAUA...');
document.body.appendChild(result.img);

// Liberar Blob URL (evitar fugas de memoria)
setTimeout(() => URL.revokeObjectURL(result.url), 60000);

Python: decodificar con biblioteca base64 y guardar imagen

python

Decodifica datos Base64 al flujo binario de imagen con la biblioteca estándar base64 de Python, y luego guárdalos con PIL/Pillow o con operaciones de archivo integradas.

import base64
from pathlib import Path

def base64_to_image(base64_string: str, output_path: str, mime_type: str = 'image/png'):
    """Decodifica una cadena Base64 y la guarda como archivo de imagen"""

    # 1. Eliminar prefijo Data URL
    if base64_string.startswith('data:image'):
        # Formato: data:image/png;base64,iVBORw0...
        header, base64_string = base64_string.split(',', 1)
        # Extraer automáticamente el MIME del encabezado
        if 'image/' in header:
            mime_type = header.split('data:')[1].split(';')[0]

    # 2. Decodificar
    image_bytes = base64.b64decode(base64_string)

    # 3. Guardar en archivo
    output_file = Path(output_path)
    output_file.parent.mkdir(parents=True, exist_ok=True)
    output_file.write_bytes(image_bytes)

    print(f"✅ Guardado: {output_file}")
    print(f"   Tamaño de archivo: {len(image_bytes):,} bytes")
    print(f"   Tipo MIME: {mime_type}")

    return output_file


# Ejemplo de uso:
# 1. Cadena Base64 obtenida de una respuesta de API
api_base64_response = "iVBORw0KGgoAAAANSUhEUgAA..."

# 2. Decodificar y guardar
base64_to_image(api_base64_response, 'output/captcha.png')

# 3. Opcional: procesar adicionalmente con PIL
try:
    from PIL import Image
    img = Image.open('output/captcha.png')
    print(f"Dimensiones de imagen: {img.size}")
    img.save('output/captcha.png', optimize=True)
except ImportError:
    print('Instala Pillow para procesar imágenes: pip install Pillow')

Java: decodificar imagen con java.util.Base64 + ImageIO

java

Decodifica el flujo binario de imagen con la biblioteca estándar Base64 de Java, y procesa los metadatos de imagen junto con ImageIO / BufferedImage.

import java.io.*;
import java.util.Base64;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;

public class Base64ToImage {
    public static void main(String[] args) throws Exception {
        String base64String = "iVBORw0KGgoAAAANSUhEUgAA...";
        String mimeType = "image/png";

        // 1. Eliminar prefijo Data URL (si existe)
        if (base64String.startsWith("data:image")) {
            int commaIdx = base64String.indexOf(',');
            String header = base64String.substring(0, commaIdx);
            base64String = base64String.substring(commaIdx + 1);
            // Extraer MIME del encabezado
            if (header.contains("image/")) {
                mimeType = header.substring(header.indexOf("data:") + 5, header.indexOf(";"));
            }
        }

        // 2. Decodificar Base64
        byte[] imageBytes = Base64.getDecoder().decode(base64String);

        // 3. Guardar en archivo
        String extension = mimeType.substring("image/".length());
        File outputFile = new File("output." + extension);
        try (FileOutputStream fos = new FileOutputStream(outputFile)) {
            fos.write(imageBytes);
        }
        System.out.println("✅ Guardado: " + outputFile.getAbsolutePath());
        System.out.println("   Tamaño de archivo: " + imageBytes.length + " bytes");

        // 4. (Opcional) Leer metadatos de imagen
        ByteArrayInputStream bais = new ByteArrayInputStream(imageBytes);
        BufferedImage image = ImageIO.read(bais);
        if (image != null) {
            System.out.println("Dimensiones de imagen: " + image.getWidth() + "x" + image.getHeight());
        }
    }
}

Preguntas Frecuentes

¿Qué formatos de imagen admite?

Admite todos los tipos MIME de imagen que los navegadores reconocen nativamente: PNG, JPG, WebP, GIF, SVG, BMP, AVIF, ICO, entre otros. La herramienta determina automáticamente el formato según el prefijo MIME de la Data URL o las características de entrada, aunque también puedes especificar el tipo MIME manualmente en la interfaz. Seleccionar el formato correcto garantiza que el navegador decodifique y muestre la imagen adecuadamente.

¿Es necesario incluir el prefijo data:image/png;base64 en la entrada?

No es necesario. La herramienta admite dos formatos de entrada:①Cadena Base64 pura (como iVBORw0KGgoAA...), en cuyo caso debes seleccionar el tipo MIME en la interfaz (como PNG/JPG);②Formato Data URL (como data:image/png;base64,iVBORw0KGgo...), donde la herramienta detecta automáticamente el tipo MIME del prefijo y decodifica. Ambos formatos de entrada son compatibles.

¿Se puede previsualizar directamente en el navegador?

Sí. La imagen decodificada se muestra directamente en el navegador mediante un Blob URL, permitiendo la vista previa online. Tras confirmar que el contenido es correcto, puedes descargarla como archivo local o copiar la Data URL para incrustarla en HTML/CSS. Todo el proceso de vista previa no requiere ninguna solicitud de red.

¿En qué se diferencia de la herramienta Base64 a archivo?

Base64 a imagen está optimizada específicamente para formatos de imagen:①detecta automáticamente el tipo MIME;②muestra la vista previa directamente en el navegador mediante Blob URL;③establece automáticamente la extensión del archivo según el MIME (.png/.jpg, etc.);④muestra información de dimensiones de imagen. Base64 a archivo es una herramienta universal adecuada para la restauración y descarga de cualquier archivo binario (como PDF, ZIP, audio, etc.).

¿Qué hacer si la imagen aparece incompleta tras decodificar?

Posibles causas:①la cadena Base64 está truncada (comprueba que la longitud sea completa);②el tipo MIME especificado es incorrecto (por ejemplo, intentar decodificar datos PNG como JPG);③los datos originales ya están corruptos. Recomendaciones:①asegúrate de que el Base64 de origen esté completo;②prueba a cambiar entre diferentes tipos MIME;③usa la herramienta Base64 Validate para comprobar la validez.

¿Cuánto aumenta el tamaño de Base64 respecto a la imagen original?

La codificación Base64 aumenta el volumen de los datos binarios originales en aproximadamente un 33% (3 bytes → 4 caracteres). Por ejemplo, un PNG de 100 KB se convierte en una cadena Base64 de unos 133 KB tras codificar. Por eso, Base64 es adecuado para imágenes pequeñas (< 10 KB); para imágenes grandes se recomienda transferirlas directamente mediante URL HTTP.

¿Admite imágenes vectoriales SVG?

Sí. SVG es un formato de imagen vectorial basado en XML que, tras codificarse en Base64, se puede incrustar directamente en elementos <img> HTML o en background-image de CSS. Tras decodificar, se renderiza de forma vectorial en el navegador y se puede escalar sin pérdida de calidad. Ten en cuenta que los SVG pueden contener código JavaScript, por lo que debes tener precaución con la seguridad XSS al usarlos.

¿Cómo guardar en un formato específico?

Al hacer clic en el botón de descarga tras decodificar, la herramienta añade automáticamente la extensión correspondiente según el tipo MIME utilizado durante la decodificación (image/png → .png, image/jpeg → .jpg). Si necesitas convertir de formato (por ejemplo, PNG → JPG), te recomendamos decodificar primero y luego convertir con otras herramientas (como Canvas o ImageMagick).

¿Por qué la imagen está en blanco o corrupta tras decodificar?

Causas frecuentes:①el Base64 contiene saltos de línea o espacios sin limpiar: utiliza primero la herramienta Base64 Clean para preprocesar;②falta el padding (=): esta herramienta lo completa automáticamente;③el tipo MIME no coincide con los datos originales: comprueba el encabezado Content-Type devuelto por la API de origen o prueba otros tipos MIME manualmente;④el Base64 de origen se truncó durante la transmisión: obtén nuevamente la cadena completa.

¿Admite imágenes grandes (>10 MB)?

Sí, aunque el rendimiento de renderizado del navegador disminuye con imágenes muy grandes. La decodificación de 10 MB en Base64 (unos 7,5 MB de imagen original) suele ser fluida; por encima de 50 MB pueden aparecer advertencias de memoria. Recomendaciones:①usa primero base64-clean para eliminar espacios en blanco;②decodifica imágenes grandes por bloques;③asegúrate de que el navegador tenga suficiente memoria disponible (se recomiendan 4 GB o más).

Solución de problemas

La imagen se muestra en blanco tras decodificar

Es posible que el tipo MIME no coincida o que el Base64 esté incompleto. Verifica: 1) el encabezado Content-Type devuelto por la API de origen; 2) cambia manualmente el tipo MIME y vuelve a intentarlo; 3) asegúrate de que la cadena Base64 esté completa (la longitud coincide con lo esperado).

Fallo de decodificación InvalidCharacterError

La cadena Base64 contiene caracteres no válidos (espacios, saltos de línea, caracteres chinos, etc.). Usa primero la herramienta Base64 Clean para eliminar todos los espacios en blanco y caracteres no válidos, y luego realiza la conversión.

La extensión del archivo descargado es incorrecta

Verifica si el tipo MIME durante la decodificación coincide con la imagen original. Si la API de origen devuelve image/jpeg pero los datos Base64 son realmente PNG, la extensión tras descargar será .jpg pero el formato real será PNG. Se recomienda confirmar el formato original desde el prefijo MIME o el encabezado Content-Type.

El navegador se bloquea al decodificar imágenes grandes

Las cadenas Base64 superiores a 50 MB pueden causar desbordamientos de memoria. Recomendaciones:①usa primero la herramienta base64-clean para eliminar caracteres de espacio en blanco;②decodifica imágenes grandes por lotes (por ejemplo, dividiendo en tiles);③asegúrate de que el navegador tenga suficiente memoria (se recomiendan 4 GB+ de memoria disponible);④procesa imágenes muy grandes con scripts de servidor Node.js / Python.

La imagen SVG no se muestra tras decodificar

SVG es un formato vectorial basado en XML. Tras decodificar debes asegurarte de que: 1) el tipo MIME sea image/svg+xml; 2) el SVG no contenga caracteres especiales sin escape; 3) algunos navegadores imponen restricciones de seguridad al código JavaScript en los SVG. Se recomienda validar la legalidad del SVG primero con una herramienta de análisis XML.

Glosario

Base64
Método de codificación que representa datos binarios mediante 64 caracteres ASCII, definido en el RFC 4648. Esta herramienta realiza el proceso inverso: convierte la cadena Base64 al binario original de la imagen.
Data URL
Formato de URL incrustado definido en el RFC 2397: data:image/<MIME>;base64,<datos>. Se puede usar directamente en el atributo src de imágenes HTML o en background-image de CSS. La herramienta detecta y elimina automáticamente el prefijo.
Tipo MIME
Tipo de medio de internet, como image/png o image/jpeg. El navegador utiliza el tipo MIME para determinar cómo interpretar el flujo de bytes como imagen.
PNG
Formato de mapa de bits con compresión sin pérdida y soporte para canal alfa. Se usa comúnmente para iconos, capturas de pantalla e imágenes que requieren preservar detalles. Tras codificar en Base64, el tamaño aumenta aproximadamente 1,33 veces.
JPG/JPEG
Formato de mapa de bits con compresión con pérdida, adecuado para fotografías. Alta tasa de compresión pero sin soporte de transparencia. Tras codificar en Base64, el tamaño aumenta aproximadamente 1,33 veces.
WebP
Formato de imagen moderno desarrollado por Google que admite compresión con y sin pérdida, además de canal alfa. Ofrece una reducción de tamaño del 25-35% respecto a PNG/JPG.
Blob (Binary Large Object)
Objeto binario nativo del navegador que puede empaquetar el flujo de bytes decodificado de Base64 como un Blob URL de imagen para su previsualización y descarga.

Tabla comparativa de 8 formatos de imagen

Diferentes formatos de imagen utilizan distintos algoritmos de compresión, características y escenarios de aplicación.

FormatoTipo MIMETipo de compresiónSoporte de transparenciaEscenario típico
PNGimage/pngSin pérdidaIconos / Capturas / Logotipos
JPGimage/jpegCon pérdidaFotografías / Paisajes
WebPimage/webpCon/sin pérdidaRecomendado para Web moderno
GIFimage/gifSin pérdida (256 colores)✅ (1-bit)Animaciones cortas / Iconos simples
SVGimage/svg+xmlVectorialLogotipos / Iconos / Ilustraciones
BMPimage/bmpNingunaOpcionalImágenes de sistema Windows
AVIFimage/avifCon/sin pérdidaFormato de próxima generación
ICOimage/x-iconSin pérdidaFavicon de sitios web

Comparativa de carga de imágenes: Data URL vs HTTP URL

Las imágenes decodificadas se pueden incrustar directamente en HTML/CSS como Data URL, en comparación con las HTTP URL tradicionales.

DimensiónData URLHTTP URL
Número de peticiones HTTP01
Reutilización en cachéDifícilFácil (CDN / navegador)
TamañoOriginal + 33%Tamaño original
Tamaño adecuado< 10 KBCualquier tamaño
Compresión en transmisiónNo (ya codificado)gzip / Brotli
Restricciones CSPPosiblesGeneralmente permitidas
Almacenamiento en servidorNo necesarioNecesario
Acceso sin conexión✅ (nivel de archivo)❌ (requiere caché)

Tabla de 5 errores comunes al convertir Base64 a imagen

Si encuentras errores de decodificación, consulta la siguiente tabla para identificar rápidamente el problema.

Síntoma de errorCausa probableSolución
Fallo de decodificación: InvalidCharacterErrorContiene espacios, saltos de línea o caracteres no Base64Preprocesa con la herramienta Base64 Clean
La imagen se muestra en blancoEl tipo MIME no coincide con los datos originalesCambia al MIME correcto (por ejemplo, usa image/png para datos PNG)
La imagen se muestra incompletaLa cadena Base64 está truncadaVuelve a obtener la cadena Base64 completa
Error de paddingBase64 URL-safe omite el paddingCompleta los = con la herramienta Base64 Padding
Desbordamiento de memoria del navegadorLa imagen es demasiado grande (> 50 MB)Decodifica por bloques o usa una herramienta de compresión de imágenes

Authoritative References