Data-URL-Konverter

Eine Data-URL bettet den tatsächlichen Inhalt einer Datei direkt in die URL selbst ein, im Format data:[mime];[encoding],[data] — so steckt ein kleines Bild, ein SVG-Icon oder ein JSON-Schnipsel unmittelbar in Ihrem HTML, CSS oder JavaScript. Eine normale Datei-URL verweist dagegen nur auf eine separate Ressource, die der Browser über einen neuen HTTP-Request abrufen muss. Der praktische Kompromiss lautet: Anfragen gegen Umfang — eine Data-URL spart den Roundtrip und funktioniert offline oder innerhalb einer einzigen, in sich geschlossenen Datei, macht das Markup dafür aber größer und kann vom Browser nicht unabhängig gecacht werden. Das macht Data-URLs ideal für winzige, selten geänderte Assets und ungeeignet für große Dateien. Fügen Sie eine Datei oder Data-URL in diesen Konverter ein, um sie in beide Richtungen zu erzeugen oder zu decodieren und die genaue Größe zu sehen.

Beide Codierungen erlauben es einer Data-URL, binäre oder textuelle Inhalte sicher zu transportieren, funktionieren dabei aber unterschiedlich. Base64 bildet je drei Bytes auf vier ASCII-Zeichen aus einem festen 64-Zeichen-Alphabet ab, verarbeitet damit jede Binärdatei zuverlässig und ist die Standardwahl für Bilder, Audio, Video und PDFs. URL-Codierung ersetzt dagegen nur unsichere Zeichen durch Prozent-Escapes wie %20, wodurch bereits lesbarer Text — etwa SVG-Markup oder einfaches JSON — kompakt und für Menschen lesbar bleibt, oft sogar kleiner als bei Base64. Die Faustregel: Base64 für echte Binär-Assets, URL-Codierung für Text und SVG, wo sie Bytes sparen kann und inspizierbar bleibt. Dieser Konverter bietet beide Formate über einen einzigen Umschalter für Dateien und Text, sodass Sie beide erzeugen und die resultierende Größe vergleichen können, bevor Sie sich entscheiden, was Sie einbetten.

Base64-Codierung fügt einer Datei rund 33 % Größe hinzu, weil sie jeweils drei Bytes an Daten durch vier ASCII-Zeichen darstellt — ein 4:3-Verhältnis, das dem Format inhärent ist und kein Mangel eines bestimmten Tools. Zusätzlich fügt eine Data-URL einen kurzen Header hinzu (das data:-Präfix, den MIME-Typ und den ;base64,-Marker), sodass die fertige Zeichenkette noch etwas größer ausfällt. Bei einem winzigen Icon sind diese zusätzlichen Bytes vernachlässigbar und werden leicht durch den entfallenden HTTP-Request aufgewogen, aber bei einer großen Datei ist die Vergrößerung real, und das Asset lässt sich auch nicht separat cachen. Dieser Konverter zeigt bei jeder Umwandlung die ursprüngliche Größe neben der Größe der Data-URL an und weist den genauen Overhead in Bytes und Prozent aus, damit Sie auf einen Blick beurteilen können, ob sich das Inlining wirklich lohnt.

Inlining eignet sich am besten für kleine, statische Assets — Icons, Logos, Inline-SVGs und winzige Hintergrundbilder — bei denen der Wegfall eines separaten HTTP-Requests den Base64-Overhead von rund 33 % und den Verlust des unabhängigen Browser-Cachings aufwiegt. Es hilft auch, wenn Sie eine einzelne, in sich geschlossene Datei, eine Offline-Seite oder ein Bild benötigen, das direkt in eine E-Mail oder ein generiertes Dokument eingebettet ist. Das Hosten einer normalen Datei ist die bessere Wahl bei großen Bildern, bei allem, was sich häufig ändert, oder bei Assets, die auf vielen Seiten wiederverwendet werden, weil der Browser sie dann einmal cachen und andernorts sofort neu laden kann. Ein nützlicher Schwellenwert: Data-URLs über etwa 32 KB schneiden meist schlechter ab als eine externe Datei. Der Validator dieses Konverters markiert genau diese 32-KB-Grenze (und warnt erneut ab 2 MB) — fügen Sie Ihre Data-URL einfach ein, um zu prüfen, ob Inlining noch sinnvoll ist.

Der MIME-Typ einer Data-URL stammt aus der Erkennung des Browsers beim Einlesen der Datei, und diese Vermutung liegt gelegentlich daneben — eine SVG-Datei mit einer generischen Dateiendung etwa wird manchmal als text/plain oder application/octet-stream statt als image/svg+xml gemeldet. Da der MIME-Typ dem Browser mitteilt, wie der Inhalt darzustellen ist, kann ein falscher Typ verhindern, dass ein Bild angezeigt wird oder eine Datei mit der richtigen Endung heruntergeladen wird. Die Lösung besteht einfach darin, den Typ explizit festzulegen, statt sich auf die automatische Erkennung zu verlassen. Dieser Konverter erkennt den MIME-Typ automatisch aus jeder Datei, lässt Sie ihn aber manuell überschreiben, mit gängigen Typen als Vorschlag während der Eingabe, sodass Sie vor dem Kopieren den korrekten Wert erzwingen können. Setzen Sie den richtigen MIME-Typ, erzeugen Sie die Data-URL neu, und Ihr eingebettetes Asset wird genau wie beabsichtigt gerendert und heruntergeladen.