Bild ↔ Base64
BildBild in eine Base64-Daten-URL umwandeln und zurück, mit Vorschau und Download.
Auf dieser Seite
Was ist die Bild-zu-Base64-Umwandlung?#
Eine Data URL ist eine Zeichenkette, die eine vollständige Datei inline einbettet und mit ihrem MIME-Typ eingeleitet wird: data:image/png;base64,iVBORw0KGgo…. Befindet sich ein Bild in einer solchen Zeichenkette, verhält es sich wie Text — Sie können es in HTML, CSS, JSON, eine Markdown-Datei oder eine Quelldatei einfügen, und der Verbraucher rendert es, ohne jemals eine separate Datei abzurufen. Diese Seite wandelt eine Bilddatei in eine Data URL um und eine Data URL zurück in ein anzeigbares Bild — vollständig in Ihrem Browser.
Base64 vergrößert Binärdaten um etwa 33 % (jede drei Bytes werden zu vier ASCII-Zeichen), daher ist eine Data URL größer als die Datei, die sie ersetzt. Dieser Kompromiss lohnt sich, wenn Sie keine externen Anfragen wollen: HTML-E-Mail-Signaturen, Single-File-Demos, in einen <head> eingebettete Favicons, in eine JSON-Konfiguration gepackte Icons oder Assets in Umgebungen (einige per CSP gesperrte Seiten, Sandbox-Vorschauen), in denen das Laden eines <img src> von der Festplatte nicht möglich ist.
Dieses Werkzeug parst Data URLs nach RFC 2397, akzeptiert sowohl base64- als auch URL-kodierte Text-Payloads, erkennt den MIME-Typ und validiert vor der Vorschau, ob es sich wirklich um ein Bild handelt — sodass ein fehlerhafter String deutlich scheitert, statt ein defektes Bild-Icon zu rendern.
Verwendung#
- Legen Sie ein Bild auf der gestrichelten Zone ab, oder klicken Sie auf Hochladen und wählen Sie eine Datei. PNG, JPEG, WebP, GIF, SVG, BMP, AVIF und ICO werden alle akzeptiert.
- Die Base64-Daten-URL-Textfläche links füllt sich mit der vollständigen
data:image/…;base64,…-Zeichenkette. Verwenden Sie Kopieren rechts, um sie zu übernehmen. - Um den umgekehrten Weg zu gehen, fügen Sie eine Data URL in dieselbe Textfläche ein. Die Vorschau rechts rendert das Bild neu, und Herunterladen speichert es wieder als echte Datei mit der korrekten Erweiterung.
- Leeren leert beide Bereiche.
Der MIME-Typ wird aus dem Data-URL-Header gelesen, nicht aus der Dateierweiterung erraten — sodass das Umbenennen einer .png in .jpg das Werkzeug nicht täuscht und die Download-Erweiterung immer zum tatsächlichen Typ passt.
Hauptfunktionen#
- Bidirektionale Umwandlung. Bild → Data URL zum Einbetten; Data URL → Datei zum Extrahieren. Dieselbe Fläche verarbeitet beide Richtungen.
- MIME-bewusst. Die vorgeschlagene Download-Erweiterung wird vom tatsächlichen Medientyp abgeleitet (
image/svg+xml→.svg,image/jpeg→.jpg), nicht vom Dateinamen. - Validiert vor der Vorschau. Fehlerhafte Zeichenketten werden als ungültig markiert, statt stillschweigend ein defektes Bild zu zeigen.
- Verarbeitet beliebige Bytes sicher. Die Base64-Kodierung erfolgt blockweise, sodass Multibyte- und Binär-Payloads ohne Beschädigung hin- und hergewandelt werden.
- Bleibt lokal. Die
FileReader- undatob/btoa-APIs erledigen die Arbeit auf der Seite; nichts wird hochgeladen.
Ausführliches Beispiel#
Sie haben pixel.gif, einen 1×1 transparenten Tracking-Pixel (die Art, die E-Mail-Clients als Öffnungs-Signal verwenden), 43 Bytes. Laden Sie ihn hoch. Die Data-URL-Textfläche erzeugt die vollständige, exakte Zeichenkette:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7Das ist eine echte, vollständige Data URL — fügen Sie sie in ein <img src="…"> in HTML, in ein CSS background-image: url('…') oder in ein JSON-Feld ein und der Verbraucher rendert den Original-Pixel ohne jeglichen Dateiabruf. Der MIME-Typ (image/gif) und die .gif-Download-Erweiterung stammen beide aus dem Data-URL-Header, nicht aus dem ursprünglichen Dateinamen.
Für ein größeres Foto gilt dasselbe Prinzip — nur der Base64-Rumpf wächst (etwa das 1,33-Fache der Bytegröße) und der MIME-Typ wird zu image/jpeg oder image/webp.
FAQ#
Warum ist meine Data URL so viel größer als die Originaldatei?#
Base64 stellt jedes drei Bytes als vier Zeichen dar, daher ist die Zeichenkette etwa 1,33-mal so groß wie die Binärgröße. Bei großen Bildern ist das verschwenderisch — ziehen Sie zuerst das Komprimierungs-Werkzeug in Betracht oder hosten Sie die Datei und verlinken Sie sie, statt sie einzubetten.
Gibt es eine Größenbeschränkung?#
Der Browser verarbeitet Data URLs bis zu mehreren hundert Megabyte, aber in der Praxis bläht alles über wenige hundert KiB Ihr HTML, CSS und JSON auf und verlangsamt Parser. Betten Sie nur kleine Icons, Logos und Sprites ein.
Kann ich ein SVG umwandeln?#
Ja. SVG hat den MIME-Typ image/svg+xml und ist bereits Text, daher ist die Data URL kompakt und geht verlustfrei hin und her.
Die eingefügte Data URL zeigt „ungültig“. Was ist passiert?#
Die Zeichenkette muss mit data: beginnen und ein Komma enthalten, das den Header von der Payload trennt. Ein unvollständiger Kopiervorgang, ein führendes Leerzeichen oder ein fehlendes ;base64-Flag führen zum Parse-Fehler. Kopieren Sie die vollständige Zeichenkette inklusive Header erneut.