Codificador de imágenes Base64

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

La codificación de imágenes en Base64 convierte los datos binarios de una imagen en una cadena ASCII que puede incrustarse directamente en HTML, CSS o JSON sin referenciar un archivo externo. El resultado es un data URI — una cadena autocontenida que comienza con data:image/png;base64, seguida de los bytes codificados en Base64 de la imagen. Los navegadores tratan los data URIs exactamente igual que las URLs de imágenes externas: decodifican el contenido Base64 y renderizan la imagen en línea.

La técnica está definida por RFC 2397 (esquema data URI) y RFC 4648 (codificación Base64). Cuando una imagen se codifica en Base64, cada 3 bytes de datos binarios de píxeles se convierten en 4 caracteres ASCII, lo que aumenta el tamaño del contenido en aproximadamente un 33%. A pesar de esta sobrecarga, las imágenes en línea eliminan una petición HTTP por recurso — una optimización significativa cuando las imágenes son pequeñas (iconos, logos, píxeles de seguimiento 1x1) y la latencia de ida y vuelta de una petición separada superaría el coste de los bytes adicionales.

Los data URIs son compatibles con todos los navegadores modernos, clientes de correo electrónico (con matices) y cualquier contexto que acepte sintaxis URI estándar. Se usan ampliamente en aplicaciones de página única, plantillas de email HTML, sprites SVG y declaraciones CSS de background-image donde reducir el número total de peticiones de red mejora el tiempo de carga percibido.

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

Esta herramienta convierte cualquier imagen a un data URI listo para usar directamente en tu navegador — sin subidas, sin servidor, sin cuenta requerida.

Casos de uso de la codificación de imágenes en Base64

Estructura de un data URI

Un data URI codifica el formato de la imagen y su contenido binario en una sola cadena. Entender su estructura ayuda al construir o analizar data URIs mediante programación:

Comparación de formatos de imagen para codificación Base64

La elección del formato de imagen afecta el tamaño de la salida Base64, la compatibilidad con navegadores y las características de renderizado. Usa el formato que mejor se adapte a tu tipo de contenido:

Ejemplos de código

Cómo convertir imágenes a data URIs Base64 en los lenguajes y entornos más populares:

// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."

import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'

import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}

# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

Preguntas frecuentes