Warum Base64 wächst
Base64 überträgt drei Bytes in vier Zeichen, der erzeugte Text ist also rund ein Drittel länger als die Datei selbst. Das Präfix data:image/png;base64, und Zeilenumbrüche kommen noch dazu. Aus einem 5 MB großen Bild wird eine Zeichenkette von etwa 6,7 MB.
Wofür eine Data-URI taugt
Für Stellen, an denen keine eigene Datei danebenliegen kann: ein background-image in CSS, ein <img src> in HTML, eine E-Mail-Signatur, die ihr Bild selbst mitbringen muss. Ein paar winzige Icons inline sparen zudem ein paar Requests.
Wann sie schadet
Eine Data-URI hat keine eigene Adresse, nichts kann also auf sie zeigen oder sie wiederverwenden. Jede Seite, die dasselbe Bild braucht, schleppt ihre eigene Kopie mit, und schon der Austausch dieses einen Bildes macht den Cache des gesamten Stylesheets ungültig, in dem es steckt. Direkt ins HTML eingebettet ist es noch ungünstiger, denn HTML wird meist gar nicht gecacht und dieselben Bytes gehen bei jedem Besuch erneut über die Leitung. Für ein großes Foto bleibt die separate Datei mit einem Link schneller. Inline lohnt sich das nur bis zu Icons von etwa einem Kilobyte.
Die URL-sichere Variante
Standard-Base64 verwendet + und /. Beide bedeuten in einer URL oder einem Dateinamen etwas anderes, deshalb nutzen Adressen das URL-sichere Alphabet mit - und _, meist ohne das abschließende Füllzeichen =. JWTs sind so kodiert. Dieses Werkzeug nimmt beide Formen an.