dataurl.rellit.de

Bild ↔ Base64 Data-URL

Ein Bild in eine Data-URL verwandeln – oder eine Data-URL einfügen und sofort sehen, was drinsteckt. Funktioniert genauso für SVG, Schriften, Text und andere Dateien. Alles läuft lokal in deinem Browser.

Wähle eine Datei, um ihre Data-URL zu erzeugen.

Alles läuft lokal in deinem Browser – es wird nichts hochgeladen.

Was eine Data-URL ist

Eine Data-URL (definiert in RFC 2397) packt den Inhalt einer Datei direkt in die Adresse hinein, statt auf eine Datei auf einem Server zu verweisen. Der Browser lädt also nichts nach – die Daten sind schon da. Der Aufbau ist immer gleich:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…
└───┘└───────┘└─────┘└──────────────────────┘
  │      │       │               │
  │      │       │               └── die Daten selbst
  │      │       └── Kodierung (fehlt sie, gilt Prozent-Kodierung)
  │      └── MIME-Typ (fehlt er, gilt text/plain)
  └── Schema

Wofür Data-URLs benutzt werden

Der bekannteste Fall sind Bilder – als <img src="data:…"> oder in CSS als background-image. Genauso verbreitet sind aber:

Base64 oder Prozent-Kodierung?

Base64 wandelt beliebige Bytes in 64 druckbare Zeichen um und ist für Binärdateien wie PNG, JPEG oder WOFF2 die richtige Wahl. Der Preis ist ein Aufschlag von rund einem Drittel: aus drei Byte werden vier Zeichen.

Die Prozent-Kodierung lässt alles stehen, was in einer URL ohnehin erlaubt ist, und schreibt nur die problematischen Zeichen als %XX. Für Textformate – allen voran SVG – ist sie deshalb meist kompakter und im Quelltext lesbar. Für Binärdateien ist sie dagegen deutlich schlechter, weil dort fast jedes Byte kodiert werden muss. Das Tool oben zeigt dir für deine konkrete Datei an, welche der beiden Varianten kürzer ausfällt.

Wann man Data-URLs besser nicht nimmt

Data-URLs sind ein Werkzeug für kleine Dateien – Icons, Logos, Platzhalter. Bei größeren Dateien kippt die Rechnung aus mehreren Gründen:

Eine eingebettete Datei wird nicht separat zwischengespeichert. Sie ist Teil deines HTML oder CSS und wird bei jedem Seitenaufruf komplett neu übertragen, während eine normale Bilddatei nach dem ersten Laden im Browser-Cache liegt. Dazu kommt der Base64-Aufschlag von einem Drittel, und in CSS blockiert die aufgeblähte Datei zusätzlich das erste Rendern der Seite. Als grobe Faustregel gilt: unter etwa 5 KB fast immer sinnvoll, darüber genau hinschauen, ab ein paar zehn Kilobyte fast immer die schlechtere Wahl.

Häufige Fragen

Werden meine Dateien hochgeladen?
Nein. Die Datei wird über die File-API deines Browsers gelesen und dort kodiert. Es gibt keinen Server, der sie zu sehen bekäme – du kannst die Seite nach dem Laden sogar offline nehmen.

Warum wird mein PDF nicht angezeigt?
Moderne Browser blockieren aus Sicherheitsgründen die Navigation zu data:-URLs auf oberster Ebene, und PDFs lassen sich so nicht mehr einbetten. Die Data-URL selbst ist trotzdem korrekt – du kannst die Datei über den Download-Knopf herausholen.

Warum wird HTML nur als Quelltext gezeigt?
Weil das Ausführen von eingefügtem HTML bedeuten würde, fremdes Skript im Kontext dieser Seite laufen zu lassen. Dieses Tool zeigt HTML aus einer Data-URL deshalb bewusst nur als Text an.

Kann ich eine Data-URL ohne den „data:“-Kopf einfügen?
Ja. Wenn du nur den nackten Base64-Teil hast, erkennt das Tool den Dateityp an den ersten Bytes – PNG, JPEG, GIF, WebP, PDF, WOFF und einige mehr haben dort eine eindeutige Signatur.

Gibt es eine Größenbeschränkung?
Technisch begrenzt heute vor allem der Arbeitsspeicher. Ältere Browser hatten harte Grenzen (der Internet Explorer etwa 32 KB), die heute keine Rolle mehr spielen. Praktisch solltest du dich aber ohnehin an der Faustregel oben orientieren, nicht am technischen Maximum.