Codificar una imagen en Base64 / Data URI

Un Data URI es una URL que contiene directamente los datos de un recurso en lugar de apuntar a un fichero remoto. Su forma general es data:[<mediatype>][;base64],<data>. Para una imagen, se tiene típicamente data:image/png;base64,iVBORw0KGgo…. El recurso queda embebido en el HTML, el CSS o el JSON y se carga sin ninguna petición HTTP adicional.

Las motivaciones habituales:

• Reducir las peticiones HTTP: integrar un icono directamente en el CSS en lugar de cargarlo aparte del documento
• Firma de correo con imagen inline: sin riesgo de que la imagen sea bloqueada como contenido remoto
• Web Components / Web Workers: en los que cargar un recurso externo plantea a menudo un problema de scope o de CORS
• Almacenamiento local (LocalStorage, IndexedDB, base de datos): serializar una miniatura de avatar como string
• Self-contained snippets: un fichero HTML autosuficiente, sin dependencia externa

Algunos contextos concretos en los que se justifica la codificación Base64 de imagen:

• Iconos SVG inline en CSS (background-image: url("data:image/svg+xml;base64,…"))
• Firmas de correo personalizadas con logo
• Prototipado rápido de una página autónoma compartida por correo
• Web components autónomos (un único fichero desplegable)
• Generación de PDF en el lado del navegador (jsPDF) con miniaturas embebidas
• Datos de prueba (mocks) que contienen imágenes

Tres pasos:

1. Suba su imagen (PNG, JPG, SVG, WebP, GIF) a través de la zona de carga
2. Haga clic en «Codificar»
3. Copie el Data URI resultante con el botón correspondiente y péguelo en su HTML, CSS o JSON

El Base64 no es una solución milagrosa. Algunas precauciones:

• El Base64 aumenta el tamaño en un ~33 %: 4 caracteres ASCII por cada 3 bytes binarios
• Las imágenes codificadas no se almacenan por separado en la caché del navegador; se recargan junto con el HTML/CSS que las contiene
• Recomendable para imágenes de menos de 10 KB; por encima, un fichero externo es generalmente más eficiente
• Para el SVG, preferir la codificación URL (mediante encodeURIComponent) en lugar de Base64: el resultado es más corto y sigue siendo parseable como texto
• Las herramientas de build modernas (Webpack, Vite) automatizan la elección entre Base64 y fichero externo mediante un tamaño umbral configurable

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

¿Cuál es la diferencia entre Base64 y binario?

El binario representa los octetos en bruto de un fichero. El Base64 es una codificación que transforma esos octetos en 64 caracteres ASCII imprimibles (A-Z, a-z, 0-9, +, /). Los contextos de texto (HTML, JSON, correo) no pueden transportar binario; el Base64 resuelve este problema a costa de un sobrecoste de tamaño del 33 %.

¿Por qué mi Data URI es tan largo?

Una imagen de 30 KB en binario se convierte en ~40 KB en Base64. Y cada carácter es un byte ASCII, así que sí, la cadena es larga. Es algo inherente a la codificación. Para las imágenes grandes, conservar un fichero externo.

¿Todos los navegadores admiten los Data URI?

Sí, sin excepción entre los navegadores modernos (Chrome, Firefox, Safari, Edge desde IE8 incluso). Límites históricos: IE8 estaba limitado a 32 KB. Ya no es un problema hoy en la web.

¿Cómo decodificar un Data URI?

Nuestro decodificador de imagen Base64 realiza la operación inversa: pegue su Data URI, recupere el fichero de imagen (PNG, JPG, SVG, WebP) listo para subir o guardar.

¿Base64 o URL encoding para los SVG?

Para el SVG, el URL encoding (con encodeURIComponent) produce una cadena más corta que Base64 y sigue siendo legible como texto. Es la opción recomendada en CSS al integrar un SVG inline. Para los formatos binarios (PNG, JPG), Base64 sigue siendo obligatorio.

¿La codificación Base64 afecta a la calidad de la imagen?

No. La codificación es lossless: es una biyección octeto binario ↔ cadena Base64. Los píxeles originales se conservan estrictamente. Solo aumenta en un 33 % el tamaño del fichero transportado.