Imagen a Base64 Codificación Guía Completa

Inserta imágenes directamente en HTML, CSS y JSON usando codificación Base64 — sin archivos externos, sin peticiones HTTP.

~33% overhead de tamaño Sin peticiones HTTP Funciona en todos los navegadores

La codificación Base64 convierte datos binarios de imagen en una cadena de texto de 64 caracteres ASCII. Esto permite insertar imágenes directamente en HTML, CSS y JSON sin referencias a archivos externos.

La técnica se usa ampliamente para iconos pequeños, plantillas de email y apps offline. Entender cuándo Base64 ayuda y cuándo perjudica el rendimiento es esencial.

Qué es la codificación Base64

Base64 es un esquema de codificación binario-a-texto que representa datos binarios usando 64 caracteres: A–Z, a–z, 0–9, + y /. Cada grupo de 3 bytes se mapea a 4 caracteres Base64. Las imágenes codificadas en Base64 pueden incluirse en HTML como data URIs o en CSS como valores background-image.

Herramienta gratuita Codificador de Imagen a Base64 Convierte cualquier imagen a un URI de datos Base64 al instante

Cómo funciona la codificación Base64

El codificador lee la imagen como bytes brutos, los divide en grupos de 6 bits y mapea cada grupo a uno de 64 caracteres. La salida termina con = o == como relleno. Un archivo PNG de 1KB se convierte en aproximadamente 1.37KB de texto Base64.

Base64 en HTML y CSS

Una imagen codificada en Base64 puede usarse en cualquier lugar donde se espera una URL. En HTML como src de img, en CSS como background-image. El formato data URI es:

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." />

/* CSS */
.icon &#123;
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
&#125;
Herramienta gratuita Codificador / Decodificador Base64 Codifica y decodifica cadenas Base64 para texto y datos

Overhead y rendimiento

Base64 añade aproximadamente un 33% de overhead. Un PNG de 10KB se convierte en ~13.3KB de Base64. Sin embargo, insertar elimina la petición HTTP — para archivos pequeños (< 5KB), esta compensación es favorable. Para imágenes más grandes, el overhead supera el ahorro. Las cadenas Base64 no son cacheables por separado.

Cuándo usar imágenes Base64

Usa Base64 para: iconos pequeños y favicons (< 5KB) en CSS; plantillas de email donde las imágenes externas pueden bloquearse; PWAs offline; archivos SVG con texturas bitmap; payloads JSON. Evita para: imágenes > 10KB, imágenes que cambian frecuentemente, imágenes que se benefician del caché CDN.

Limitaciones y alternativas

Limitaciones: sin caché separado, aumento del 33%, cadenas largas en el código fuente. Alternativas: CSS sprites, multiplexación HTTP/2, SVGs inline. Para emails, usa imágenes alojadas en CDN cuando las cadenas Base64 son demasiado largas.

Herramienta gratuita Generador de Favicon Genera favicons en todos los tamaños requeridos desde cualquier imagen

FAQ

¿Qué es la codificación Base64 de imágenes? +
La codificación Base64 convierte datos binarios en una cadena de texto imprimible usando 64 caracteres ASCII, permitiendo insertar imágenes en HTML, CSS o JSON sin archivos separados.
¿Cuánto más grande es una imagen Base64? +
Base64 añade aproximadamente un 33% de overhead. Un PNG de 10KB se convierte en ~13.3KB de texto Base64.
¿Cómo uso una imagen Base64 en HTML? +
Como data URI en el atributo src: . El mismo formato funciona en CSS como background-image.
¿Base64 funciona con todos los formatos de imagen? +
Sí. El tipo MIME en el data URI especifica el formato: image/png, image/jpeg, image/gif, image/webp, image/svg+xml.
¿Debo usar Base64 para imágenes grandes? +
No. Para imágenes > 5–10KB, el 33% de overhead supera el ahorro de la petición HTTP. Usa Base64 solo para iconos pequeños y marcadores de posición.
¿Los navegadores cachean las imágenes Base64? +
No por separado. La cadena Base64 es parte del archivo HTML o CSS y se cachea como parte de ese archivo.
¿Puedo usar imágenes Base64 en emails? +
Sí. Algunos clientes de email bloquean imágenes externas pero siempre renderizan las Base64 inline. Sin embargo, aumentan el tamaño del email significativamente.