Wie wandle ich ein Bild in Base64 um?

Ziehen Sie das Bild in den Konverter oder fügen Sie es ein. Der Base64-String, die Data-URI und fertige Snippets für HTML, CSS, Markdown und JSON erscheinen sofort, jeweils mit einem Kopieren-Button.

Wie wandle ich Base64 in ein Bild um?

Wechseln Sie zu Base64 → Bild und fügen Sie die Data-URI oder den rohen Base64-String ein. Das Bild erscheint sofort in der Vorschau und lässt sich mit der richtigen Dateiendung herunterladen.

Macht Base64 Bilder größer?

Ja, um etwa ein Drittel, weil je drei Bytes zu vier Zeichen werden. Einbetten lohnt sich für kleine Bilder, die eine Anfrage sparen, nicht für große Fotos.

Wie verwende ich ein Base64-Bild in CSS?

Verwenden Sie es als URL: background-image: url("data:image/png;base64,…");. Kopieren Sie das CSS-Snippet, dann liegt es bereits in dieser Form vor.

Sollte ich SVG in Base64 kodieren?

Meist nicht. Eine URL-kodierte SVG-Data-URI ist kleiner als die Base64-Variante, bleibt lesbar und wird von jedem modernen Browser unterstützt. Das Tool erzeugt sie für SVG-Dateien standardmäßig.

Funktionieren Base64-Bilder in E-Mails?

Die Unterstützung schwankt: Viele Webmail-Programme, darunter Gmail, blockieren Bilder als Data-URI. Für E-Mails sind angehängte Bilder mit cid:-Verweis oder gehostete Bilder verlässlicher.

Wird mein Bild hochgeladen?

Nein. Das Bild wird in Ihrem Browser gelesen und kodiert, und nichts wird an einen Server gesendet.

Bild in Base64 umwandeln

Ein Bild in eine Base64-Data-URI für HTML, CSS oder JSON verwandeln – und zurück. Alles läuft lokal — nichts wird hochgeladen.

Eingang: PNG · JPEG · WebP · GIF · SVG · ICO · Base64
Ausgang: Base64 · data URI · HTML · CSS · image file

Bild zum Umwandeln in Base64 hierher ziehen

PNG, JPEG, WebP, GIF, AVIF, SVG und mehr. Sie können ein Bild auch aus der Zwischenablage einfügen. Es verlässt Ihr Gerät nie.

Ein Bild in Base64 umwandeln – und Base64 zurück in ein Bild

Dieser Konverter von Bild in Base64 macht aus einem PNG, JPEG, WebP, GIF oder SVG einen Base64-String und eine Data-URI und schreibt die Snippets, die Sie tatsächlich einfügen: ein HTML-img-Tag, eine CSS-Regel mit background-image, Markdown und einen JSON-String. Er funktioniert auch umgekehrt: Fügen Sie eine Data-URI oder rohes Base64 ein, um das Bild zu sehen, seinen echten Typ zu prüfen und es herunterzuladen. Das Bild wird auf Ihrem Gerät gelesen und nie hochgeladen.

So wandeln Sie ein Bild in Base64 um

Ziehen Sie ein Bild auf die Seite, wählen Sie eines aus oder fügen Sie es mit Ctrl/⌘ + V aus der Zwischenablage ein.
Prüfen Sie Vorschau, Abmessungen und Größen. Schalten Sie bei einem Foto Als WebP neu kodieren ein, um den String zu verkleinern; lassen Sie bei einem SVG URL-kodiertes SVG eingeschaltet.
Kopieren Sie die Form, die Sie brauchen: rohes Base64, die Data-URI, ein HTML-<img>-Tag, ein CSS-background-image, Markdown oder einen JSON-String.
Für den umgekehrten Weg wechseln Sie zu Base64 → Bild, fügen den String ein und laden das Bild herunter oder schicken es an ein anderes Tool.

Was eine Data-URI ist

Eine Data-URI packt den Inhalt einer Datei direkt in eine URL: data:image/png;base64,iVBORw0KGgo…. Der Teil vor dem Komma nennt den Medientyp und gibt an, dass die Daten Base64-kodiert sind; der Rest ist das Bild selbst. Überall, wo ein Browser eine Bild-URL akzeptiert – ein src-Attribut, ein CSS-url(), ein Markdown-Bild –, akzeptiert er auch eine Data-URI, und das Bild kommt ohne separate Anfrage an.

Der Preis ist die Größe. Base64 macht Daten etwa 33 % größer, und ein eingebettetes Bild kann nicht für sich allein zwischengespeichert werden: Es wird mit jeder Kopie des HTML oder CSS, das es enthält, erneut heruntergeladen. Einbetten lohnt sich für kleine Bilder – Icons, winzige Logos, Platzhalter, Bilder in HTML-E-Mails oder Einzeldatei-Dokumenten – und kostet bei Fotos von Hunderten Kilobyte mehr, als es spart.

Welches Snippet Sie verwenden

Rohes Base64: Nur die kodierten Bytes, für APIs und JSON-Felder, die Base64 erwarten und den Typ separat speichern.
Data-URI: Die vollständige data:-URL, bereit für jede Stelle, die eine Bild-URL annimmt.
HTML <img>: Ein img-Tag mit der Data-URI, einem Alt-Text aus dem Dateinamen sowie Breite und Höhe des Bildes, was Layoutverschiebungen verhindert.
CSS background-image: Eine Deklaration für ein Stylesheet. Gut für kleine, wiederholte Verzierungen; vermeiden Sie es bei großen Bildern in kritischem CSS.
Markdown und JSON: Ein Bild in Markdown-Syntax und die Data-URI als korrekt in Anführungszeichen gesetzter und maskierter JSON-String.

SVG: URL-Kodierung schlägt Base64

SVG ist Text und braucht daher überhaupt kein Base64. Werden nur die wenigen Zeichen prozentkodiert, die eine URL nicht aufnehmen kann, und doppelte Anführungszeichen in einfache umgewandelt, entsteht eine data:image/svg+xml,…-URI, die meist 15–30 % kleiner ist als die Base64-Fassung, sich mit gzip besser komprimieren lässt und lesbar bleibt. Für SVG-Dateien ist das hier der Standard; schalten Sie es ab, wenn ein System auf Base64 besteht.

Bei Rasterbildern verkleinert eine Neukodierung als WebP vor der Umwandlung den String bei Fotos und Screenshots oft um die Hälfte oder mehr. Dabei wird der eigene Encoder Ihres Browsers verwendet; kann der Browser kein WebP schreiben, sagt das Tool es Ihnen und behält das erhaltene Ergebnis. Für mehr Kontrolle über Format und Qualität nutzen Sie vorher den Bildkonverter.

Base64 in Bild

Fügen Sie eine vollständige Data-URI, rohes Base64 oder sogar ein ganzes <img>-Tag oder eine CSS-Regel ein, und das Tool extrahiert das Bild, zeigt es in der Vorschau und nennt Größe und Abmessungen. Der Typ wird aus den ersten Bytes des Bildes gelesen, statt der Beschriftung zu vertrauen, ein als PNG beschriftetes JPEG wird also als das heruntergeladen, was es wirklich ist. Für Base64, das etwas anderes als ein Bild enthält, etwa ein PDF oder ein ZIP, nutzen Sie den Base64 Decoder, der mit jedem Dateityp umgehen kann.

Häufige Fragen

Wie wandle ich ein Bild in Base64 um?: Ziehen Sie das Bild in den Konverter oder fügen Sie es ein. Der Base64-String, die Data-URI und fertige Snippets für HTML, CSS, Markdown und JSON erscheinen sofort, jeweils mit einem Kopieren-Button.
Wie wandle ich Base64 in ein Bild um?: Wechseln Sie zu Base64 → Bild und fügen Sie die Data-URI oder den rohen Base64-String ein. Das Bild erscheint sofort in der Vorschau und lässt sich mit der richtigen Dateiendung herunterladen.
Macht Base64 Bilder größer?: Ja, um etwa ein Drittel, weil je drei Bytes zu vier Zeichen werden. Einbetten lohnt sich für kleine Bilder, die eine Anfrage sparen, nicht für große Fotos.
Wie verwende ich ein Base64-Bild in CSS?: Verwenden Sie es als URL: background-image: url("data:image/png;base64,…");. Kopieren Sie das CSS-Snippet, dann liegt es bereits in dieser Form vor.
Sollte ich SVG in Base64 kodieren?: Meist nicht. Eine URL-kodierte SVG-Data-URI ist kleiner als die Base64-Variante, bleibt lesbar und wird von jedem modernen Browser unterstützt. Das Tool erzeugt sie für SVG-Dateien standardmäßig.
Funktionieren Base64-Bilder in E-Mails?: Die Unterstützung schwankt: Viele Webmail-Programme, darunter Gmail, blockieren Bilder als Data-URI. Für E-Mails sind angehängte Bilder mit cid:-Verweis oder gehostete Bilder verlässlicher.
Wird mein Bild hochgeladen?: Nein. Das Bild wird in Ihrem Browser gelesen und kodiert, und nichts wird an einen Server gesendet.