Bild in Base64 umwandeln

Wandle PNG, JPG, SVG und mehr in eine Base64-Data-URL um und kopiere sie als HTML, CSS oder Markdown. Base64 lässt sich auch wieder als Bild speichern.

Datei hierher ziehen oder klicken, um sie auszuwählenPNG, JPEG, GIF, WebP, SVG, AVIF, ICO, BMP · max. 10MB · Einfügen (Strg+V) geht auch

Ergebnis

Füge ein Bild hinzu, um die Data-URL und fertigen HTML-, CSS- und Markdown-Code zu erhalten.

Dateien werden nur auf diesem Gerät verarbeitet und nie auf einen Server hochgeladen. So funktioniert es

Ein Bild als Vorschau seiner PNG-Base64-Daten-URL

[data-tool-illustration] > img { display: none; }

So funktioniert es

Zieh im Tab „Bild → Base64“ ein Bild hinein, klicke, um eines auszuwählen, oder füge ein kopiertes Bild mit Strg+V (auf dem Mac ⌘+V) ein. Unterstützt werden PNG, JPEG, GIF, WebP, SVG, AVIF, ICO und BMP bis 10 MB. Neben der Vorschau siehst du das Format, Breite × Höhe in Pixeln, die Originalgröße und die Base64-Größe mit der Zunahme direkt darunter, weiter unten fünf Ausgabeformate, je eines pro Zeile:

Data-URL: data:image/png;base64,… – der Wert, den du direkt in src oder url() einsetzt
Reines Base64: nur die Daten, ohne das Präfix data:…;base64, (für APIs oder JSON)
HTML: <img src="…" alt="">
CSS: background-image: url("…");
Markdown: ![](…)

Lange Zeichenketten werden auf dem Bildschirm in der Mitte gekürzt, der Kopieren-Button kopiert aber immer die vollständige Zeichenkette. Das HTML-Attribut alt bleibt leer – ergänze dort einen Text, der das Bild beschreibt.

Beim Erkennen des Formats hat die Signatur am Dateianfang (Magic Bytes) Vorrang vor dem Dateinamen. Eine Datei mit der Endung .jpg, die in Wirklichkeit ein PNG ist, wird korrekt als image/png angegeben.

Die SVG-Vorschau nutzt ein img-Element; Skripte innerhalb der SVG werden dabei nicht ausgeführt.

Das Format einer Data-URL

Eine Data-URL folgt dem in RFC 2397 festgelegten Format data:[<Medientyp>][;base64],<Daten>. Der Medientyp (etwa image/png) sagt dem Browser, um welche Art von Daten es sich handelt, und ;base64 kennzeichnet die Daten als Base64-kodiert. Fehlt ;base64, werden die Daten als URL-kodierter (Prozent-kodierter) Text gelesen. Binärdaten wie Bilder werden meist mit Base64 eingebettet, textbasierte Daten wie SVG können auch URL-kodiert eingebettet werden.

Ein Base64-Zeichen trägt nur 6 Bit, deshalb stellt Base64 je 3 Bytes mit 4 Zeichen aus einem Alphabet von 64 Zeichen dar (RFC 4648), und das Ergebnis ist etwa 33 % größer als das Original. Fügst du zum Beispiel ein PNG mit 10 KB (10.240 Bytes) hinzu, erhältst du 13.656 Zeichen, also etwa 13,3 KB, und als „Zunahme“ steht dort +33,4 %. Die „Base64-Größe“ zählt das 22 Zeichen lange Präfix data:image/png;base64, nicht mit, deshalb ist die Zeichenzahl neben der Zeile „Data-URL“ mit 13.678 etwas höher. Bei sehr kleinen Dateien kann das abschließende =-Padding die Zunahme noch etwas erhöhen.

Wann Inline-Einbettung hilft und wann sie schadet

Bettest du ein Bild als Data-URL in HTML oder CSS ein, muss der Browser keine eigene Bilddatei anfordern. Das passt zu kleinen Icons und Logos mit wenigen KB sowie zu HTML-Dokumenten oder Codebeispielen, die in einer einzigen Datei vollständig sein sollen.

Bei großen Fotos ist es dagegen ein Nachteil:

Die Größe wächst um etwa 33 %. Der Prozentsatz ist bei jeder Datei fast gleich, die tatsächlich hinzukommende Menge aber nicht. Ein Icon mit 2 KB (2.048 Bytes) wird zu 2.732 Zeichen und wächst nur um 684 Bytes, ein Foto mit 2 MB (2.097.152 Bytes) wird zu 2.796.204 Zeichen und wächst um etwa 683 KB. Vergleiche nach dem Hinzufügen „Originalgröße“ und „Base64-Größe“ und entscheide, ob deine HTML- oder CSS-Datei um diesen Betrag größer werden darf.
Das Bild steckt in der HTML- oder CSS-Datei und wird deshalb nicht getrennt zwischengespeichert. Nutzen mehrere Seiten dasselbe Bild, wird es mit jeder Seite erneut heruntergeladen.
Eine größere CSS-Datei kann die Darstellung verzögern, bis das ganze Stylesheet geladen ist.

SVG ist URL-kodiert kürzer

SVG ist ein textbasiertes Bildformat und braucht überhaupt kein Base64. Base64 macht die Datei etwa 33 % größer, URL-Kodierung ersetzt dagegen nur einige problematische Zeichen und ist deshalb meist kürzer. Fügst du eine SVG-Datei hinzu, kannst du unter „SVG-Kodierung“ die Option „URL-kodiert“ wählen, und die Größen beider Varianten werden nebeneinander angezeigt. Das Tool fasst Zeilenumbrüche und mehrere Leerzeichen zu einem Leerzeichen zusammen, ersetzt doppelte durch einfache Anführungszeichen (enthält die Datei bereits einfache Anführungszeichen, werden doppelte als %22 kodiert) und kodiert nur Zeichen wie <, >, # und %. Das Ergebnis kannst du direkt in ein HTML-Attribut oder ein CSS-url("…") einsetzen. Mit „URL-kodiert“ entfällt die Zeile „Reines Base64“, und die Markdown-Zeile erscheint wegen der verbleibenden Leerzeichen in der Form ![](<…>). SVG-Dateien, die nicht in UTF-8 vorliegen, lassen sich nur mit Base64 kodieren.

Base64 wieder in ein Bild umwandeln

Füge im Tab „Base64 → Bild“ eine Data-URL oder eine reine Base64-Zeichenkette ein, dann erscheinen eine Vorschau und ein Download-Button. Leerzeichen und Zeilenumbrüche werden ignoriert, und auch Zeichenketten mit URL-sicheren Zeichen (-, _) oder fehlendem =-Padding werden angenommen. Das Format wird automatisch an den Magic Bytes erkannt. PNG beginnt zum Beispiel mit 89 50 4E 47, JPEG mit FF D8 FF und GIF mit GIF87a oder GIF89a. Passt das in der Data-URL angegebene Format nicht zu den tatsächlichen Daten, wird das Bild im echten Format angezeigt und du bekommst einen Hinweis. Lässt sich das Format nicht erkennen, wähle es unter „Bildformat“ selbst aus.

Quellen

RFC 2397: The "data" URL scheme — (auf Englisch)
RFC 4648: The Base16, Base32, and Base64 Data Encodings — (auf Englisch)
MDN Web Docs: data: URLs
Can I email: Base64 encoded images — (auf Englisch)
CSS-Tricks: Probably Don't Base64 SVG — (auf Englisch)

Häufige Fragen

Kann ich mehrere Bilder auf einmal umwandeln?

Nein, immer nur ein Bild. Ziehst du mehrere Dateien gleichzeitig hinein, wird nur die erste umgewandelt, die übrigen werden ohne Hinweis übersprungen. Ein weiteres Bild ersetzt das bisherige Ergebnis; kopiere die Zeilen, die du brauchst, also bevor du das nächste Bild hinzufügst. Auch deine Auswahl unter „SVG-Kodierung“ springt bei jedem neuen Bild auf „Base64“ zurück – auch wenn das neue Bild wieder ein SVG ist.

Lässt sich auch eine URL-kodierte SVG-Data-URL wieder in ein Bild umwandeln?

Ja. Der Tab „Base64 → Bild“ nimmt auch eine Data-URL ohne ;base64 an, etwa data:image/svg+xml,%3Csvg…, und macht daraus wieder eine SVG-Datei. Eine Zeichenkette, die mit „URL-kodiert“ in diesem Tool entstanden ist, kommt allerdings nicht Zeichen für Zeichen zurück: Zeilenumbrüche, mehrere Leerzeichen (zu einem zusammengefasst) und doppelte Anführungszeichen (durch einfache ersetzt) werden nicht wiederhergestellt. Ist die URL-Kodierung beschädigt (folgen etwa auf ein % keine zwei Hexadezimalziffern), erscheint der Fehler zur ungültigen Data-URL.

Verliert ein Bild durch Base64 an Qualität?

Nein. Das Tool zeichnet das Bild nicht neu und komprimiert es nicht erneut, sondern schreibt die Bytes der Datei unverändert als Base64-Zeichen. Transparenz, GIF-Animation und Metadaten in der Datei bleiben deshalb erhalten, und wenn du die Zeichenkette im Tab „Base64 → Bild“ zurückwandelst, entsteht eine Datei, die Byte für Byte dem Original entspricht. Der ursprüngliche Dateiname steckt allerdings nicht im Base64, darum heißt der Download image mit der zum Format passenden Endung, zum Beispiel image.png. Wählst du unter „Bildformat“ ein anderes Format, werden die Daten nicht in dieses Format umgewandelt.

Was tun, wenn beim Einfügen von Base64 ein Fehler erscheint?

Das hängt von der Meldung ab. Der Fehler zu einem ungültigen Zeichen nennt das erste Zeichen, das stört. Dann wurde etwas mitkopiert, das kein Base64 ist, etwa ein Anführungszeichen oder Auslassungspunkte (…) – lösche dieses Zeichen. Der Fehler zu Länge oder Padding (=) erscheint, wenn die Zeichenkette mittendrin abgeschnitten wurde; kopiere sie noch einmal von Anfang bis Ende. Der Fehler zur ungültigen Data-URL erscheint, wenn der Text mit data: beginnt, aber vor den Daten das Komma (,) fehlt. Erscheint nur der Hinweis, dass dein Browser das Bild nicht anzeigen konnte, kannst du die Datei trotzdem über den Download-Button speichern und in einem anderen Programm öffnen.

Kann ich ein Data-URL-Bild in einer HTML-E-Mail verwenden?

Wie gut Base64-Bilder funktionieren, hängt vom E-Mail-Programm ab. Laut Can I email, einer Übersicht zur Unterstützung in E-Mail-Programmen (geprüft im September 2026), zeigt Outlook für Windows 2007–2019 keine Base64-GIFs an, GMX und WEB.DE unterstützen nur PNG, und manche Webmail-Dienste wie Orange und LaPoste.net entfernen das src-Attribut, sodass das Bild nicht erscheint. Bei E-Mails an viele Empfänger, etwa Newslettern, teste vor dem Versand in den Programmen, die deine Empfänger hauptsächlich nutzen.