Por qué el Base64 crece
El Base64 traslada tres bytes a cuatro caracteres, así que el texto resultante ocupa alrededor de un tercio más que el archivo del que salió. El prefijo data:image/png;base64, y los saltos de línea añaden algo más. Una imagen de 5 MB sale como una cadena de unos 6,7 MB.
Dónde sirve un data: URI
Sirve allí donde no puedes dejar un archivo al lado del marcado: un background-image de CSS, un <img src> de HTML, una firma de correo que tiene que llevar su propia imagen. Incrustar unos pocos iconos diminutos ahorra además unas cuantas peticiones.
Cuándo evitarlo
Un data: URI no tiene dirección propia, así que nada puede apuntar a él ni reutilizarlo. Cada página que necesita la misma imagen carga su propia copia, y cambiar esa única imagen invalida la caché de toda la hoja de estilos que la contiene. Incrustado directamente en el HTML es peor todavía, porque el HTML no suele cachearse y esos bytes viajan de nuevo en cada visita. Para una foto grande, el archivo suelto con un enlace sigue siendo más rápido. Incrustar compensa hasta iconos de aproximadamente un kilobyte.
La variante URL-safe
El Base64 estándar usa + y /. Los dos significan otra cosa dentro de una URL o de un nombre de archivo, así que las direcciones usan el alfabeto URL-safe con - y _, normalmente sin el relleno = final. Los JWT se codifican así. Esta herramienta acepta ambas formas.