Base64 DataURL Konverter

Reines Base64
0 Zeichen

Online-Tool zum Umwandeln zwischen reinem Base64 und dem vollständigen Data-URL-Format mit automatischer MIME-Erkennung.

Ähnliche Tools

Base64-Kodierung

Base64-Dekodierung

Base64 mehrzeilig zusammenführen

Base64 zu Bild

Bild zu Base64

Base64-Bereinigung

Was ist eine Base64-DataURL?

Eine DataURL ist ein URI-Schema, das Daten direkt in die URL einbettet, in der Form data:[<MIME-Typ>];base64,<Base64-Daten>. Damit lassen sich kleine Ressourcen wie Bilder, PDFs oder Schriftarten direkt in HTML, CSS oder JavaScript einbinden, ohne zusätzliche HTTP-Anfragen.

**Reines Base64 vs. DataURL:** Reines Base64 ist nur die kodierte Zeichenkette (z. B. iVBORw0KGgo...); eine DataURL ist ein vollständiger URI mit dem Präfix data: und einem MIME-Typ und kann direkt als Wert für src, href, url() usw. verwendet werden.

**Wozu dieses Tool dient:** Es wandelt zwischen „reinen Base64-Strings" und „vollständigen DataURLs" um — es kann vorhandenem Base64 automatisch das Präfix data: und einen MIME-Typ voranstellen oder den reinen Base64-Teil aus einer DataURL extrahieren.

**Typische Einsatzzwecke:** ① CSS-Hintergrundbilder einbetten; ② Inline-src in HTML <img>; ③ Inline-Bilder in Markdown; ④ Bilder in Rich-Text-Editoren einfügen; ⑤ Fehlersuche im data-URI-Schema.

Anwendungsfälle

  • Vorhandenem Base64 das Präfix data: und einen MIME-Typ hinzufügen, um eine direkt einbettbare DataURL zu erhalten
  • Den reinen Base64-Teil aus einer DataURL extrahieren, um ihn neu zusammenzusetzen oder zu übertragen
  • Beim Debugging prüfen, ob der Base64-Payload eines Frontend-data:-URI vollständig ist
  • Den MIME-Typ von in die Zwischenablage kopiertem Base64 automatisch erkennen (PNG/JPEG/PDF usw.)
  • Eine Data-URL für CSS background-image oder HTML <img src> vorbereiten
  • Bild-Base64 in einem Markdown-Editor in eine einfügbare DataURL verwandeln

Anleitung

  1. Richtung wählen: „Präfix hinzufügen" (reines Base64 → DataURL) oder „Präfix entfernen" (DataURL → reines Base64).
  2. Inhalt links einfügen: im Modus „Hinzufügen" reines Base64, im Modus „Entfernen" eine data:...-Zeichenkette.
  3. Im Modus „Hinzufügen" kannst du „Automatisch erkennen" beibehalten oder einen konkreten MIME-Typ aus dem Dropdown wählen.
  4. Das Tool wandelt live um und zeigt das Ergebnis rechts an, bereit zum Kopieren oder Download als txt.

Funktionen

  • Zwei Richtungen: reines Base64 ↔ DataURL
  • 11 MIME-Typ-Voreinstellungen: Bild, Dokument, Audio, Video, Text
  • Automatische MIME-Erkennung über Magic Bytes für PNG/JPEG/GIF/WEBP/PDF
  • Leerzeichen entfernen: entfernt Zeilenumbrüche, Leerzeichen und Störzeichen
  • Live-Umwandlung: Ergebnis wird 300 ms nach der Eingabe neu berechnet
  • Richtungswechsel tauscht Ein- und Ausgabe automatisch
  • Ein-Klick-Kopieren: Ergebnis in die Zwischenablage kopieren
  • Als txt herunterladen: Ergebnis in dataurl-result.txt speichern
  • Responsive Layout: ziehbare Split-Ansicht am PC, Tabs auf Mobilgeräten
  • Komplett im Browser: kein Inhalt wird auf einen Server geladen

Best Practices

Beginne mit der automatischen Erkennung

Wenn du den MIME-Typ nicht sicher kennst, lass „Automatisch erkennen" aktiv und wähle nur bei Fehlern manuell.

Beachte die Größengrenze

DataURLs sind in Browsern auf ca. 2–4 MB begrenzt — verlinke große Dateien per URL statt sie einzubetten.

Entferne Störzeichen

Eingefügtes Base64 enthält oft Zeilenumbrüche, die das Tool automatisch entfernt; für strengere Bereinigung nutze den Base64-Cleaner.

Ergebnis prüfen

Validiere die DataURL nach der Umwandlung mit dem Base64-Validator oder den Browser-DevTools, um das Laden zu bestätigen.

Nach dem Einfügen kontrollieren

Prüfe das dekodierte Ergebnis in der Browser-Konsole, nachdem du es an der Zielstelle eingefügt hast.

Häufig gestellte Fragen

Ist die automatische Erkennung im Modus „Hinzufügen" aktiv?

Ja. Die automatische Erkennung ist standardmäßig aktiv und prüft die ersten Bytes des Base64 (Magic Bytes), um PNG, JPEG, GIF, WEBP oder PDF zu identifizieren. Für andere MIME-Typen (z. B. application/json, video/mp4) wähle manuell einen aus dem Dropdown.

Was passiert, wenn die Eingabe bereits das Präfix data: hat?

Im Modus „Hinzufügen" wird die Eingabe unverändert zurückgegeben, wenn sie bereits mit data: beginnt — das Präfix wird nicht dupliziert. Im Modus „Entfernen" entfernt das Tool die Leerzeichen und gibt reines Base64 zurück, wenn die Eingabe kein DataURL ist.

Was geschieht, wenn die automatische Erkennung fehlschlägt?

Wenn das Base64 zu keiner Magic-Byte-Signatur von PNG/JPEG/GIF/WEBP/PDF passt, fällt die automatische Erkennung auf application/octet-stream zurück. Wähle bei Bedarf manuell einen anderen MIME-Typ.

Welche MIME-Typen werden unterstützt?

image/png, image/jpeg, image/gif, image/webp, image/svg+xml, application/pdf, application/json, text/plain, text/html, audio/mpeg und video/mp4 — insgesamt 11 gängige Typen.

Gibt es eine Größengrenze für DataURLs im Browser?

Ja. Die meisten Browser begrenzen die Gesamtlänge einer DataURL (ca. 2 MB–4 MB); darüber scheitert das Laden. Für große Dateien solltest du eine normale URL verwenden.

Wo können DataURLs verwendet werden?

In HTML <img src>, in CSS url(), in <a href>-Downloads, in JavaScript fetch, in der Markdown-Bildsyntax, in eingebetteten Ressourcen in JSON-Daten und ähnlichen Stellen.

Werden Zeilenumbrüche und Leerzeichen im Base64 automatisch entfernt?

Ja. Im Modus „Hinzufügen" werden Zeilenumbrüche und Leerzeichen vor dem Anhängen des Präfixes entfernt; im Modus „Entfernen" werden Leerzeichen auch nach der Extraktion aus der DataURL entfernt.

Ändert sich die Eingabe beim Wechsel der Richtung?

Ja. Beim Richtungswechsel übernimmt das Tool die aktuelle Ausgabe als neue Eingabe, sodass du ohne erneutes Einfügen weiterarbeiten kannst.

Wird mein Inhalt auf einen Server geladen?

Nein. Alle Umwandlungen laufen lokal in deinem Browser; weder Eingabe noch Ausgabe verlassen dein Gerät.

Glossar

DataURL
Das von RFC 2397 definierte Data-URI-Schema in der Form data:[<mime>];base64,<data>, das direkt als Wert für src, href, url() usw. verwendet werden kann.
MIME-Typ
Kennung für einen Medientyp wie image/png oder application/pdf. Dieses Tool unterstützt 11 gängige MIME-Typen und kann sie automatisch erkennen.
Magic Bytes
Feste Bytes am Dateianfang, die zur Identifikation des Dateityps dienen. Dieses Tool erkennt PNG/JPEG/GIF/WEBP/PDF anhand dieser Magic Bytes.
Base64
Kodierung, die Binärdaten mit 64 druckbaren Zeichen darstellt. Der Payload-Teil einer DataURL ist Base64.
Data-URI-Schema
Das von RFC 2397 definierte data:-URI-Protokoll; der formale Name der Spezifikation für DataURL.

Authoritative References