Convertir imagen a Base64

Un data URI es un archivo incrustado en el lugar que lo referencia. En lugar de que src="logo.png" apunte a algo que el navegador debe descargar, los bytes de la imagen se escriben dentro del propio atributo. Sin petición, sin segundo archivo, sin nada que pueda dar 404.

Por qué base64 y no los bytes crudos

Porque los sitios donde van estas cadenas — un archivo CSS, un atributo HTML, un valor JSON — son texto, y un PNG no lo es. Sus bytes incluyen comillas, saltos de línea, bytes nulos y todo lo demás que terminaría una cadena o corrompería un documento. Base64, definido en el RFC 4648, convierte cada tres bytes en cuatro caracteres tomados de un alfabeto de 64 símbolos que es seguro en cualquier parte, y rellena con = cuando la entrada no se divide en partes iguales.

Cuatro caracteres por cada tres bytes es de donde sale el 33%. No es una sobrecarga que un codificador mejor pudiera eliminar; es aritmética.

Cuándo conviene incrustar

Para recursos pequeños que se usan de inmediato: un icono en una regla CSS, un espaciador de 1 × 1, un logotipo en un correo HTML donde las imágenes externas están bloqueadas por defecto, un marcador de posición que debe renderizarse antes de que cargue cualquier otra cosa. En todos estos casos, la petición que te ahorras cuesta más que el 33% que pagas — una petición arrastra DNS, establecimiento de conexión y latencia de ida y vuelta, y en una conexión móvil eso son decenas de milisegundos para un archivo que cabría en un solo paquete.

Cuándo es un error

Para todo lo grande o reutilizado. Un data URI no puede guardarse en caché de forma independiente: incrusta una imagen hero de 200 KB en tu hoja de estilos y cada visitante la vuelve a descargar con cada cambio de cualquier regla de ese archivo. Tampoco puede descargarse en paralelo — es parte del documento, así que se baja antes de que el documento termine, bloqueando justamente el renderizado que se suponía que debía acelerar. Y no puede cargarse en diferido, redimensionarse por una CDN ni servirse como WebP a los navegadores que lo soportan.

La frontera aproximada está en un par de kilobytes. Por debajo, incrustar suele ganar; por encima de unos 10 KB suele perder, y esta página te lo dice cuando cruzas ese umbral.

Content Security Policy

Un CSP estricto bloquea los data URI a menos que los permitas. Las imágenes necesitan img-src 'self' data: ; una fuente incrustada del mismo modo necesita que font-src permita también data:. Conviene saberlo antes de incrustar algo y descubrir que solo falta en producción, donde se aplica el CSP.

Base64 no es cifrado

Merece la pena decirlo sin rodeos, porque la confusión es habitual: base64 es una codificación, reversible por cualquiera, sin ninguna clave de por medio. Todo lo que se incruste así es tan legible como lo era antes. No oculta nada.

Dónde se ejecuta

En tu navegador. El archivo se lee con un FileReader y se codifica localmente — no se sube nada, y para una imagen que vas a incrustar en tu propio código fuente es lo único que tiene sentido.