Convertir una imagen a Base64

Qué es Base64

Base64 es una forma de escribir datos binarios usando solo caracteres de texto seguros: letras, números y un par de signos. No es cifrado, no es compresión y no protege nada: cualquiera puede convertirlo de vuelta a la imagen original en un segundo.

Existe por un motivo histórico muy concreto: muchos sistemas —el correo electrónico entre ellos— se diseñaron para transportar texto, y no admiten bytes arbitrarios. Base64 permite meter un archivo dentro de un canal de texto sin que se corrompa.

El Data URI es Base64 con un prefijo que le dice al navegador qué está recibiendo:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...

Con ese prefijo puesto, la cadena se puede usar en cualquier sitio donde iría la dirección de una imagen. Eso es lo que hace el modo Data URI de esta herramienta: te lo entrega ya completo, listo para pegar.

El coste: un tercio más de peso

Base64 usa cuatro caracteres para cada tres bytes del archivo original, así que engorda alrededor de un 33 %. Una imagen de 90 KB se convierte en unos 120 KB de texto, y ese es el peso que viaja de verdad.

Es la razón por la que, si vas a incrustar imágenes, conviene comprimirlas antes con más agresividad de lo habitual: cada kilobyte que ahorras en la imagen son 1,33 kilobytes menos de código.

Y explica también un fenómeno que desconcierta a mucha gente: por qué un adjunto de 20 MB rebota en un buzón que admite 25. Los adjuntos de correo viajan codificados en Base64, con ese mismo 33 % de sobrecoste.

Dónde se usa

En HTML

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

En CSS

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

En JavaScript o en una petición

// Enviar una imagen en un JSON, donde no caben bytes sueltos
fetch("/api/subir", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ nombre: "foto.jpg", datos: base64SinPrefijo })
});

Fíjate en el detalle: para un JSON necesitas el Base64 plano, sin el prefijo data:. Para HTML y CSS necesitas el Data URI completo. Los dos modos están en la herramienta precisamente por eso, y confundirlos es el error más común: una etiqueta <img> con Base64 plano no muestra nada.

Cuándo merece la pena

• Iconos muy pequeños, de menos de 2 o 3 KB. Ahorras una petición al servidor y el sobrecoste es insignificante.
• Plantillas de correo donde no puedes alojar archivos, o donde las imágenes externas se bloquean.
• Un solo archivo autocontenido: una página HTML que debe funcionar sin carpeta de imágenes al lado, un informe que se envía por correo, una demostración.
• Meter una imagen en un JSON o en una base de datos que solo acepta texto.
• Evitar un parpadeo en una imagen crítica muy pequeña, que aparece con el HTML sin esperar una segunda descarga.

Cuándo es una mala idea

• Imágenes grandes. Una foto de 200 KB se convierte en 266 KB de texto dentro de tu HTML, y el navegador no puede empezar a mostrar la página hasta haber descargado todo ese código.
• Imágenes que se repiten en varias páginas. Es el argumento decisivo: un archivo aparte se descarga una vez y se guarda en el caché del navegador; una imagen incrustada viaja en cada página, siempre.
• Cuando quieres que se pueda diferir. Una imagen incrustada no admite loading="lazy": ya está dentro del documento.
• Si el HTML se genera en el servidor en cada visita. Estás mandando los mismos kilobytes una y otra vez sin posibilidad de caché.

Regla práctica: por debajo de 2 KB, incrustar suele ganar. Por encima de 10 KB, casi nunca. En medio, depende de si la imagen se repite en varias páginas.

Cómo volver atrás

Recuperar la imagen desde un Data URI es inmediato: pega la cadena completa en la barra de direcciones del navegador y pulsa Enter. La imagen se abre y puedes guardarla con el botón derecho. También sirve como comprobación rápida de que la cadena está bien copiada.

Si solo tienes el Base64 plano, añádele delante data:image/jpeg;base64, —o image/png según el caso— y funcionará igual.

Un detalle sobre seguridad

Base64 no oculta nada. Es un cambio de alfabeto, no un cifrado. Una imagen incrustada en el código de una página es igual de accesible que un archivo suelto: cualquiera puede copiar la cadena y reconstruir el archivo. Si una imagen no debe ser vista, incrustarla no la protege.

Por otro lado, todo el proceso ocurre en tu navegador: la conversión la hace la propia página con el archivo que le das, y ni la imagen ni el Base64 resultante se envían a ningún servidor.