Decodificador de imágenes Base64

¿Qué es la decodificación de imágenes Base64?

La decodificación de imágenes Base64 es lo opuesto a la codificación: toma una cadena Base64 o data URI que representa una imagen y la convierte nuevamente en datos binarios visibles. Cuando recibas una cadena como data:image/png;base64,iVBORw0KGgo..., la decodificación elimina el prefijo de data URI, revierte la codificación Base64 definida en RFC 4648 y reconstruye los bytes originales de la imagen. El navegador puede entonces renderizar los bytes decodificados como una imagen visible.

Los data URIs (RFC 2397) agrupan el tipo MIME y el contenido codificado en Base64 en una única cadena. Aparecen frecuentemente en respuestas de API, código fuente de correos HTML, hojas de estilo CSS y registros de base de datos donde las imágenes se almacenan como texto en lugar de archivos binarios. Decodificar estas cadenas es necesario para previsualizar la imagen, verificar su contenido o guardarla como archivo independiente. Como Base64 utiliza 4 caracteres ASCII para representar cada 3 bytes de datos binarios, la cadena codificada siempre es aproximadamente un 33% más grande que la imagen original.

Esta herramienta analiza tanto data URIs completos (data:image/png;base64,...) como cadenas Base64 sin el prefijo data:. Para cadenas sin prefijo, el formato de la imagen se detecta automáticamente inspeccionando los primeros caracteres Base64, que corresponden a los magic bytes del archivo — por ejemplo, iVBORw0KGgo siempre indica un archivo PNG. La imagen decodificada se renderiza directamente en el navegador y puede descargarse como archivo.

Un escenario común es trabajar con una API REST que devuelve una foto de perfil o miniatura de documento como cadena Base64 dentro de un campo JSON — por ejemplo, {"avatar": "data:image/png;base64,iVBORw0KGgo..."}. Para usar la imagen, extrae el valor del campo, elimina el prefijo de data URI hasta la coma inclusive, y luego alimenta los caracteres Base64 restantes a través de un decodificador como atob() en JavaScript o base64.b64decode() en Python para recuperar los bytes originales. Pegar el valor completo en esta herramienta salta todos esos pasos manuales y renderiza la imagen instantáneamente.

¿Por qué usar este decodificador de imágenes Base64?

Esta herramienta convierte datos de imágenes Base64 nuevamente en una imagen visible y descargable completamente en tu navegador — sin carga, sin procesamiento en servidor, sin cuenta requerida.

Casos de uso de decodificación de imágenes Base64

Estructura de Data URI para imágenes

Un data URI empaqueta el tipo de imagen y el contenido codificado en una única cadena. Cada componente es esencial para una decodificación correcta: el esquema (data:) señala que la URL es independiente en lugar de una referencia a un recurso externo; el tipo MIME (p. ej., image/png) le indica al renderizador qué formato usar al interpretar los bytes crudos; el marcador ;base64, distingue contenido codificado en Base64 de data URIs que utilizan codificación de porcentaje para formatos de texto plano. La carga útil Base64 en sí puede terminar con uno o dos caracteres de relleno = — estos son necesarios cuando el número de bytes de entrada no es múltiplo de tres, asegurando que la longitud codificada sea siempre múltiplo de cuatro. Omitir o truncar cualquiera de estos componentes causa que la decodificación falle o produzca una imagen corrupta.

Detección del formato de imagen desde Base64

Cuando una cadena Base64 carece de un prefijo data:, el formato de imagen puede identificarse inspeccionando los primeros caracteres. Estos caracteres corresponden a los magic bytes del archivo — secuencias de bytes fijas al inicio de cada archivo de imagen que identifican el formato:

Ejemplos de código

Cómo decodificar cadenas de imágenes Base64 nuevamente en archivos de imagen en lenguajes y entornos populares:

// Decode a Base64 data URI to a Blob and create a download link
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Method 1: fetch API (simplest)
const res  = await fetch(dataUri)
const blob = await res.blob()
// blob.type → "image/png", blob.size → 2048

// Method 2: manual decode for older environments
const [header, b64] = dataUri.split(',')
const mime    = header.match(/:(.*?);/)[1]   // → "image/png"
const binary  = atob(b64)
const bytes   = Uint8Array.from(binary, c => c.charCodeAt(0))
const blob2   = new Blob([bytes], { type: mime })

// Create a download link
const url = URL.createObjectURL(blob)
const a   = document.createElement('a')
a.href = url
a.download = 'decoded.png'
a.click()
URL.revokeObjectURL(url)

import base64
import re

data_uri = 'data:image/png;base64,iVBORw0KGgo...'

# Parse the data URI
match = re.match(r'data:(image/[\w+.-]+);base64,(.+)', data_uri)
mime_type = match.group(1)    # → "image/png"
b64_data  = match.group(2)

# Decode and write to file
image_bytes = base64.b64decode(b64_data)
ext = mime_type.split('/')[1].replace('jpeg', 'jpg').replace('svg+xml', 'svg')

with open(f'output.{ext}', 'wb') as f:
    f.write(image_bytes)
# → writes output.png (byte-for-byte identical to the original)

# Decode raw Base64 (no data: prefix)
raw_b64 = 'iVBORw0KGgo...'
image_bytes = base64.b64decode(raw_b64)

import { writeFileSync } from 'fs'

const dataUri = 'data:image/png;base64,iVBORw0KGgo...'

// Extract MIME type and Base64 payload
const [meta, b64] = dataUri.split(',')
const mime = meta.match(/:(.*?);/)[1]  // → "image/png"

// Decode to Buffer and save
const buffer = Buffer.from(b64, 'base64')
writeFileSync('output.png', buffer)
// → output.png (identical to the original file)

// Validate by checking magic bytes
console.log(buffer.subarray(0, 4))
// PNG → <Buffer 89 50 4e 47>  (\x89PNG)
// JPEG → <Buffer ff d8 ff e0>

# Decode a raw Base64 string to an image file (Linux)
echo 'iVBORw0KGgo...' | base64 -d > output.png

# Decode a raw Base64 string to an image file (macOS)
echo 'iVBORw0KGgo...' | base64 -D > output.png

# Extract Base64 from a data URI and decode
echo 'data:image/png;base64,iVBORw0KGgo...' | \
  sed 's/^data:.*base64,//' | base64 -d > output.png

# Identify the image format from the decoded file
file output.png
# → output.png: PNG image data, 64 x 64, 8-bit/color RGBA

Preguntas frecuentes