Kodieren Sie Dateien oder Text lokal mit dem Multi-Format-Encoder, um Data-URIs zu bauen.
Was eine Data-URI ist
Eine Data-URI bettet eine Datei direkt in ein src- oder href-Attribut ein, z. B. data:image/png;base64,iVBORw0KGgo…. Der Browser dekodiert sie lokal, sodass keine separate HTTP-Anfrage nötig ist.
Das Format ist durch RFC 2397 definiert; die Base64-Variante ist die häufigste Art, Binärdateien inline einzubetten.
Die vollständige Form besteht aus drei Teilen: dem Schema data:, einem optionalen Medientyp wie image/png und den Nutzdaten. Mit ;base64 sind die Nutzdaten Base64-Text; ohne dieses Kennzeichen sind sie prozentkodiert wie in einer normalen URL.
Zum ersten Mal habe ich zu einer Data-URI gegriffen, als ich einem Kollegen eine einzelne HTML-Datei mit eingebettetem Logo schicken musste. Die Demo blieb dadurch eigenständig, und die übliche Rückfrage nach fehlenden Bilddateien entfiel.
Reiner Text braucht kein Base64. Eine prozentkodierte Data-URI wie data:text/plain,Hallo%20Welt ist kleiner und lesbar, aber Binärdateien sind weiterhin auf Base64 angewiesen.
Wann Data-URIs helfen
- Winzige Icons und Logos unter etwa 2 KB, die einmal pro Seite vorkommen
- Kleine Fonts oder Sprites, bei denen eine Extra-Anfrage mehr kostet als die Bytes
- Selbstständiges HTML für E-Mails, Demos oder Offline-Dateien
- Fälle, in denen das Asset in einer einzigen Datei überleben muss
- Ein Favicon oder kleines SVG-Icon, das nur auf einer Seite oder in einer Komponente vorkommt
- Ein einmalig verwendetes Hintergrundbild in einem Stylesheet
- Prototypen und Demo-Seiten, bei denen sich ein eigener Serverpfad nicht lohnt
Wann Data-URIs schaden
- Große Fotos: Sie blähen das HTML auf und blockieren das Parsen
- Wiederholte Assets: Jedes Vorkommen bettet die Bytes erneut ein und wird nicht gecacht
- HTTP/2-Seiten: Parallelität und Caching machen separate Dateien günstig
- Alles über etwa 10 KB, wo eine normale URL bei jeder Metrik gewinnt
- Assets hinter einer Content-Security-Policy, die data:-Quellen blockiert — das Bild scheitert dann still
- Alles, was Sie oft ändern: Jede Änderung erzwingt einen Neuaufbau der Seite, die es einbettet
- E-Mail-Clients: Einige verbreitete Anbieter entfernen data:-Quellen aus Sicherheitsgründen, Inline-Bilder erscheinen dann nicht
Warnung: Base64 fügt etwa 33 % Overhead hinzu. Ein 100-KB-Foto wird zu einem 133-KB-Inline-Block in Ihrem HTML – sichtbar für jeden Besucher bei jedem Seitenaufruf.
Data-URI vs. externe Datei im Überblick
| Szenario | Data-URI | Externe Datei |
|---|---|---|
| Icon unter 2 KB, einmal genutzt | Gut | OK |
| Großes Foto | Schlecht | Am besten |
| Asset auf vielen Seiten | Schlecht | Am besten (Cache) |
| Selbstständige E-Mail oder Demo | Am besten | Nicht nutzbar |
| E-Mail-Newsletter mit Bildern | Unzuverlässig | Am besten |
| Häufig aktualisiertes Asset | Schlecht | Am besten (Cache) |
Eine Data-URI lokal erstellen
Der Encoder läuft vollständig in Ihrem Browser. Ihre Datei verlässt das Gerät nicht, Sie können also auch Dateien einbetten, die Sie nicht hochladen möchten. Bauen Sie die URI mit dem Multi-Format-Encoder und kopieren Sie das Ergebnis direkt in Ihr Markup.
- Öffnen Sie den Multi-Format-Encoder in Ihrem Browser.
- Laden Sie Ihre Bilddatei und kodieren Sie sie als Base64.
- Stellen Sie data:<MIME-Typ>;base64, vor die Ausgabe.
- Fügen Sie das Ergebnis in Ihr src- oder href-Attribut ein.
- Prüfen Sie die Ausgabegröße. Ist die Base64-Zeichenkette deutlich größer als die Originaldatei, gewinnt meist eine normale URL.
FAQ
Q.Werden Data-URIs vom Browser gecacht?
A.Nein. Data-URIs leben im Dokument und werden bei jedem Seitenaufruf erneut geladen. Externe Dateien können gecacht und über Seiten hinweg geteilt werden. Taucht dasselbe Asset an zehn Stellen auf, speichert der Browser den Data-URI-Text zehnmal.
Q.Wie groß ist der Overhead von Base64?
A.Etwa 33 % plus Padding. Aus 1 MB Binärdaten werden grob 1,33 MB Text. Das ist der Preis dafür, Binärdaten textverträglich darzustellen: Base64 bildet je drei Bytes auf vier Zeichen ab.
Q.Sind Data-URIs gut für SEO?
A.Suchmaschinen können sie indexieren, aber sie erhöhen das HTML-Gewicht und lassen sich nicht wie echte Bilddateien optimieren oder cachen. Nutzen Sie sie sparsam und behalten Sie Bilder für Produktionsseiten in separaten Dateien. Für einen Test oder ein internes Werkzeug fällt das Zusatzgewicht kaum ins Gewicht.
Q.Kann ich eine Data-URI in CSS verwenden?
A.Ja, in url() – etwa background-image: url(data:image/svg+xml;base64,…). Es gelten dieselben Abwägungen, und lange Zeichenketten erschweren das Lesen des Stylesheets. Halten Sie sie kurz.
Q.Funktionieren Data-URIs in E-Mails?
A.Nicht zuverlässig. Mehrere verbreitete Clients blockieren data:-Quellen aus Sicherheitsgründen, ein Bild kann also im Postfach erscheinen und anderswo als defekter Link. Hosten Sie wichtige Bilder und verlinken Sie sie.
Referenzen
- RFC 2397 – The "data" URL scheme: https://www.rfc-editor.org/rfc/rfc2397
- RFC 4648 – The Base16, Base32, and Base64 Data Encodings: https://www.rfc-editor.org/rfc/rfc4648
- MDN – Daten-URLs: https://developer.mozilla.org/de/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
Kleines inline, Rest verlinken
Für ein Einmal-Icon unter 2 KB ist eine Data-URI in Ordnung. Bei Bildern, die sich wiederholen oder Kilobyte wiegen, gewinnt eine normale Datei, weil der Browser sie cacht.
Bauen Sie die URI lokal mit dem Multi-Format-Encoder und prüfen Sie die Größe, bevor Sie sie einfügen.
Ein kurzer Check vor dem Einfügen: Wie groß ist die Datei, und wie oft lädt die Seite sie? Unter etwa 2 KB und einmalig genutzt – inline. Darüber oder bei Wiederholung – verlinken.