¿Qué es Base64 y por qué se usa en imágenes web?

Base64 es una forma de escribir cualquier archivo binario, como una imagen, en texto plano usando solo 64 caracteres seguros: las letras de la A a la Z en mayúscula y minúscula, los dígitos del 0 al 9, y + y /. Las webs lo usan con imágenes porque ese texto se puede pegar directamente en HTML, CSS o JSON, así que un icono pequeño llega dentro de la página en lugar de descargarse por separado. El inconveniente es el tamaño: el texto en Base64 ocupa aproximadamente un tercio más que el archivo original. En esta guía te explicamos cómo funciona la codificación, dónde ayuda de verdad y cuándo es mejor usar un archivo de imagen normal.

Qué hace realmente la codificación Base64#

Los ordenadores guardan una imagen como bytes en bruto, y muchos de esos bytes no corresponden a ningún carácter imprimible. Eso es un problema para todo lo que está pensado para transportar texto: un atributo HTML, un archivo CSS, un campo JSON o el cuerpo de un correo. Base64 lo resuelve reescribiendo los bytes solo con caracteres que pasan intactos por cualquier sistema de texto.

El método está definido en el RFC 4648, el estándar que sigue la mayoría del software. Funciona en grupos pequeños:

1. Se toman 3 bytes del archivo (24 bits).
2. Esos 24 bits se dividen en 4 bloques de 6 bits.
3. Cada bloque de 6 bits es un número entre 0 y 63, que se busca en el alfabeto de 64 caracteres.

El ejemplo clásico es la palabra Man. Sus tres bytes se convierten en los cuatro caracteres TWFu. Si la longitud del archivo no es múltiplo de 3, el resultado termina con uno o dos signos = de relleno; por eso tantas cadenas Base64 acaban en = o ==.

Lo que Base64 no es: cifrado. Cualquiera puede decodificarlo al instante, sin clave ni contraseña. Solo cambia cómo se escriben los datos, no quién puede leerlos.

Por qué Base64 hace los archivos un 33 % más grandes#

Como cada 3 bytes se convierten en 4 caracteres, el resultado en Base64 siempre mide unos 4/3 del original, es decir, alrededor de un 33 % más. No es una estimación, es aritmética:

Algunos sistemas además insertan un salto de línea cada 76 caracteres (el correo electrónico lo hace, como describe el RFC 2045), lo que añade un poco más. La compresión de texto del servidor web (gzip o Brotli) recupera parte de ese exceso, pero una imagen codificada nunca acaba siendo más pequeña que el archivo original.

Cómo usan las webs Base64 para imágenes#

En la web, las imágenes en Base64 casi siempre aparecen como una URL de datos (data URL): la propia imagen escrita en el lugar donde normalmente iría un enlace a ella. El formato, documentado en la página de MDN sobre data URLs, tiene este aspecto:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Logo">

Lo mismo funciona en CSS, por ejemplo como imagen de fondo:

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}

El navegador lee el texto, lo decodifica de vuelta al PNG original y lo muestra exactamente igual que si hubiera descargado un archivo aparte. Para obtener este fragmento con tu propia imagen, arrastra un JPG, PNG, WebP o AVIF al conversor de imagen a Base64 y copia la etiqueta img, la regla CSS o la cadena tal cual.

Cuándo conviene usar imágenes en Base64#

Incrustar una imagen como texto tiene sentido en unos pocos casos concretos:

• Iconos y gráficos de interfaz diminutos. Un icono pequeño incrustado en tu CSS llega junto con la hoja de estilos, así que no aparece tarde ni falla al cargar por su cuenta.
• Archivos autónomos. Un único archivo HTML, una plantilla de correo o un documento que quieres que funcione sin archivos externos pueden llevar sus imágenes dentro.
• Datos que tienen que viajar como texto. Las API JSON, los archivos de configuración y los fragmentos del portapapeles no admiten bytes en bruto, así que las imágenes que contienen suelen ir en Base64. Los adjuntos de correo también son Base64 por dentro, por el mismo motivo.
• Prototipos y demos rápidas, cuando prefieres pegar una cadena antes que alojar una imagen en algún sitio.

Cuándo evitar las imágenes en Base64#

Para la mayoría de las imágenes de una web real, un archivo de imagen normal es mejor opción:

• Descargas más pesadas. Cada imagen incrustada cuesta aproximadamente un tercio más de bytes que el archivo.
• Sin caché propia. Una imagen en Base64 se guarda en caché como parte del HTML o CSS que la contiene. Si cambias una sola línea de esa hoja de estilos, el navegador vuelve a descargar también la imagen, mientras que un archivo de imagen aparte sigue en caché por su cuenta.
• Retrasa la página. El texto de la imagen va dentro de tu HTML o CSS, que el navegador tiene que descargar antes de poder mostrar la página. Una foto grande incrustada lo ralentiza todo, incluido el texto que de otro modo aparecería primero.
• Ahorrar peticiones importa menos que antes. Evitar una petición era el principal argumento para incrustar, pero HTTP/2 permite al navegador descargar muchos archivos pequeños por una sola conexión, así que hoy ese ahorro es mucho menor.

Una regla sensata: incrusta solo imágenes de unos pocos kilobytes como mucho y sirve todo lo demás como archivo normal. En las fotos, lo que más se nota suele ser reducir el propio archivo, y eso lo hace el compresor de imágenes en tu navegador. Nuestra guía para comprimir imágenes sin perder calidad explica hasta dónde puedes llegar.

El caso especial de SVG#

Los archivos SVG ya son texto, así que en realidad no necesitan Base64 para ir en una URL de datos. Puedes codificar el SVG para URL, lo que normalmente ocupa menos porque se ahorra el 33 % extra, aunque Base64 es más sencillo y evita problemas con comillas y caracteres especiales. El conversor de SVG a Base64 te da las dos versiones para que elijas, y si no tienes claro qué contiene realmente un SVG, nuestro artículo sobre qué es un archivo SVG lo explica.

Los dos conversores funcionan íntegramente en tu navegador, así que tus imágenes nunca se suben a ningún servidor. Encontrarás herramientas relacionadas en las secciones de herramientas de imagen y herramientas para desarrolladores.

Preguntas frecuentes#

¿Qué es la codificación Base64, explicado de forma sencilla? La codificación Base64 es una forma de escribir cualquier archivo, como una imagen, en texto plano usando 64 caracteres seguros (las letras de la A a la Z en mayúscula y minúscula, los dígitos del 0 al 9, más + y /). Permite que los datos binarios pasen por sistemas que solo manejan texto, como HTML, CSS, JSON y el correo electrónico.

¿Por qué las webs usan Base64 para las imágenes? Las webs usan Base64 para que una imagen pequeña pueda ir directamente dentro del HTML o el CSS en lugar de descargarse como archivo aparte. Es más útil con iconos diminutos y con archivos autónomos como las plantillas de correo.

¿Base64 hace las imágenes más grandes? Sí, Base64 hace las imágenes un 33 % más grandes aproximadamente, porque cada 3 bytes del archivo original se convierten en 4 caracteres de texto. Una imagen de 30 KB pasa a ocupar unos 40 KB en Base64.

¿Base64 es un tipo de cifrado? No, Base64 no es cifrado, porque cualquiera puede decodificarlo al instante sin clave ni contraseña. Solo cambia cómo se escriben los datos, no quién puede leerlos, así que nunca lo uses para ocultar información sensible.

¿Cuándo no debería usar imágenes en Base64? No deberías usar Base64 con imágenes grandes ni fotos, porque el 33 % extra de tamaño y la falta de caché propia ralentizan la página. Sírvelas como archivos de imagen normales e incrusta solo imágenes de unos pocos kilobytes como mucho.

¿Cómo convierto una imagen a Base64? Para convertir una imagen a Base64, arrástrala a un conversor como la herramienta de imagen a Base64 de ConvertOwl, que funciona en tu navegador y te da la cadena codificada junto con una etiqueta img o una regla CSS listas para pegar.

En resumen#

• Base64 escribe cualquier archivo como texto con 64 caracteres seguros. Es una codificación, no un cifrado.
• Cada 3 bytes se convierten en 4 caracteres, así que el resultado ocupa un 33 % más aproximadamente.
• Las webs lo usan para meter imágenes pequeñas directamente en HTML o CSS como URLs de datos.
• Incrusta solo imágenes diminutas; sirve las fotos y todo lo que sea más grande como archivos normales.
• Pruébalo con el conversor de imagen a Base64 o el conversor de SVG a Base64, y encontrarás más en nuestros artículos de tecnología.