Data-URI und data:text/html;base64 erklärt, mit Encoder | We.Inc
So funktionieren data:-URLs: die Syntax, base64 vs. Prozentkodierung, ein Drittel mehr Größe, warum data:text/html sich nicht in einem Tab öffnet, plus Encoder und Decoder.
Eine Data-URL trägt eine komplette Datei in der Adresse selbst: data:, ein optionaler Medientyp, ;base64, wenn die Bytes base64-kodiert sind, ein Komma und dann der Inhalt. data:text/html;base64,PGgxPkhpPC9oMT4= ist eine winzige Webseite. Base64 macht die Nutzdaten etwa ein Drittel größer, und Browser weigern sich, data:-Seiten als eigenen Tab auf oberster Ebene zu öffnen.
Aufbau einer Data-URL
Teil
Beispiel
Hinweise
Schema
data:
Steht immer zuerst
Medientyp
image/svg+xml
Optional; Standard ist text/plain;charset=US-ASCII
Parameter
;charset=utf-8
Optional, nach dem Medientyp
Kodierungs-Flag
;base64
Nur vorhanden, wenn die Daten base64 sind
Trennzeichen
Pflicht, auch ohne Medientyp
Daten
PHN2Zz4uLi48L3N2Zz4=
Base64 oder prozentkodierter Text
Data-URLs sind praktisch für winzige Icons, CSS-Hintergründe, Test-Fixtures und generierte Downloads, und sie sorgen oft für Verwirrung, wenn jemand einen langen data:text/html-String in die Adressleiste einfügt und nichts passiert. Unten kannst du beliebigen Text in eine Data-URL kodieren, eine zurück dekodieren und genau sehen, was sie im Vergleich zum Original an Bytes kostet.
Tippe oder füge Inhalt ein und wähle seinen Medientyp. Das Tool zeigt die base64- und die prozentkodierte Form samt Länge.
Vergleiche die Größen. Base64 braucht ungefähr vier Zeichen für je drei Bytes; Prozentkodierung kann bei reinem Text und SVG kürzer sein.
Füge eine beliebige Data-URL in den Decoder ein, um Medientyp, Kodierung und Inhalt zu lesen. Bildtypen zeigen eine Vorschau.
HTML-Ergebnisse werden in einem Sandbox-Frame dargestellt, weil eine data:-Seite nicht als eigener Tab geöffnet werden kann.
Für SVG in CSS ist Prozentkodierung meist kleiner als base64 und bleibt lesbar. Denk daran, # als %23 zu kodieren.
Binde nur kleine Dateien inline ein. Eine Data-URL kann nicht separat gecacht werden, daher wird eine große mit jeder Seite oder jedem Stylesheet, das sie enthält, erneut heruntergeladen.
Ganz ohne Medientyp gilt text/plain;charset=US-ASCII, also nenne den Typ und ergänze charset=utf-8 für Text mit Umlauten, Akzenten oder Emoji.
Data-URLs unterstützen keine Query-Strings. Alles nach dem Komma, auch ein Fragezeichen, wird als Daten behandelt.
Für Dateien, die Besucher auf der Seite erzeugen, vermeidet eine blob:-URL aus URL.createObjectURL einen riesigen String.
Häufige Fragen
Warum öffnet sich data:text/html;base64 nicht, wenn ich es in die Adressleiste einfüge?
Moderne Browser blockieren die Navigation zu data:-URLs auf oberster Ebene als Schutz vor Phishing, weil eine data-Seite jede beliebige Website imitieren und dabei ihre echte Herkunft verbergen könnte. Der Inhalt funktioniert weiterhin in einem iframe, einem img-Element oder als Download-Link.
Um wie viel vergrößert base64 eine Datei?
Um etwa ein Drittel. Base64 schreibt je drei Bytes als vier Zeichen, sodass ein 30-KB-Bild vor jeder Kompression zu etwa 40 KB Text wird. Der genaue Zuwachs hängt von Länge und Padding ab.
Wie wandle ich eine base64-Data-URL wieder in ein Bild um?
Füge sie in den Decoder auf dieser Seite ein, um sie anzusehen, oder setze sie direkt in ein img src. Um sie als Datei zu speichern, nutze unser Bild-zu-base64-Tool in umgekehrter Richtung oder rufe die Data-URL in JavaScript mit fetch ab und speichere den entstehenden Blob.
Gibt es eine Größenbegrenzung?
MDN nennt 512 MB für Chromium und Firefox und 2,048 MB für Safari. Lange vorher machen riesige Data-URLs HTML und CSS langsam beim Parsen und unmöglich zu cachen, also halte sie bei wenigen Kilobyte.
Welchen Origin hat eine Seite aus einer Data-URL?
Einen eigenen, opaken Origin, nicht den Origin der Seite, die sie erzeugt hat. Script in einem data:-iframe wird von der umgebenden Seite also als Fremder behandelt, nicht als Teil derselben Website.
Wann Inlining hilft und wann es schadet
Inlining spart einen Request, was bei einer Handvoll winziger Assets wie einem Lade-Spinner oder einem Favicon in einer Demo aus einer einzigen Datei zählt. Es schadet, wenn das Asset groß ist oder auf vielen Seiten verwendet wird, weil die Bytes dann mit jeder HTML-Datei oder jedem Stylesheet mitgeschickt werden, statt einmal gecacht zu werden.
Eine vernünftige Faustregel: Binde Dinge unter ein paar Kilobyte, die einmal vorkommen, inline ein, und verlinke alles andere als normale Datei.
Base64 oder Prozentkodierung?
Binärdateien wie PNG, JPEG und Schriften brauchen base64. Textformate, vor allem SVG, können Prozentkodierung nutzen: Nur Zeichen wie #, %, < und > sowie Leerzeichen müssen maskiert werden, daher ist das Ergebnis oft kürzer und bleibt für Menschen lesbar.
Der Encoder unten zeigt beide Längen nebeneinander, damit du für deinen Inhalt die kleinere wählen kannst.
Häufige Fehler
Ein Tippfehler im base64, ein verirrter Zeilenumbruch oder ein falscher Medientyp schlägt lautlos fehl: Das Bild wird einfach nicht angezeigt. Lass einen fehlerhaften String durch den Decoder laufen, um zu sehen, wo es hakt.
Ein weiterer häufiger Ausrutscher ist das vergessene Komma, wenn kein Medientyp angegeben ist. data:,Hello ist gültig; data:Hello ist keine brauchbare Data-URL.
Data-URLs in echtem Code
SVG-Hintergrund in CSS, prozentkodiert
Einfache Anführungszeichen im SVG vermeiden Konflikte mit den doppelten Anführungszeichen um url(), und das # der Farbe wird als %23 geschrieben.
Ein winziges Inline-Bild
Dieselbe Idee funktioniert in einem img-Tag. Behalte den Alt-Text bei, wie bei jedem Bild.
Eine Data-URL aus einer Datei in JavaScript erzeugen
FileReader.readAsDataURL erzeugt den vollständigen data:-String samt Medientyp für eine Datei, die der Besucher auswählt.
Eine Data-URL wieder in einen Blob verwandeln
fetch versteht data:-URLs, das ist der kürzeste Weg, die Bytes wieder herauszuholen.
Data-URL-Encoder und -Decoder
Zu kodierender Inhalt
Medientyp
Base64-Data-URL
Prozentkodierte Data-URL
Original {n} Bytes, base64-URL {v} Zeichen
Prozentkodierte URL {v} Zeichen
In einem Sandbox-Frame dargestellt
Eine Data-URL dekodieren
Füge eine Data-URL ein
Medientyp: {v}
Kodierung: {v}
Dekodierte Größe: {n} Bytes
Das sieht nicht nach einer gültigen Data-URL aus. Sie braucht data:, einen optionalen Typ, ein Komma und die Daten.