Was ist ein Base64-Bild-Data-URI?

Ein Data URI bettet ein Bild direkt in eine Zeichenkette wie data:image/png;base64,XXXX ein. Die Bildbytes werden Base64-kodiert, sodass Sie das ganze Bild ohne separate Datei oder Anfrage in ein HTML-src oder CSS-url() setzen können.

Welche Bildformate kann ich kodieren?

Jedes Bild, das Ihr Browser lesen kann — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF und ICO funktionieren. Der Decoder liest den MIME-Typ aus dem Data URI und bietet eine passende Download-Endung an.

Sollte ich Bilder als Base64 einbetten?

Einbetten eignet sich für kleine, häufig wiederverwendete Assets wie Icons oder E-Mail-Bilder, bei denen das Sparen einer Anfrage hilft. Bei größeren Bildern schadet es meist, weil Base64 etwa ein Drittel zur Größe hinzufügt und die Daten nicht eigenständig zwischengespeichert werden können.

Kann ich einen Data URI wieder in eine Bilddatei decodieren?

Ja. Wechseln Sie zu Base64 → Bild, fügen Sie die data:image/…;base64,-Zeichenkette ein, und das Tool zeigt das Bild an und lässt Sie es mit der richtigen Dateiendung herunterladen.

Werden meine Bilder beim Kodieren hochgeladen?

Nein. Der Encoder liest die Datei mit dem FileReader des Browsers und baut den Data URI auf Ihrem Gerät. Nichts wird an ArrayKit oder einen Server gesendet.

Warum ist die Base64-Zeichenkette größer als mein Bild?

Base64 stellt drei Bytes mit vier Zeichen dar, daher ist der kodierte Text rund 33% größer als die ursprünglichen Binärdaten, plus das kurze Präfix data:…;base64,. Dieser Overhead ist normal und zu erwarten.

Base64-Bild-Encoder / -Decoder

Wandle Bilder in Base64-Data-URIs mit HTML- und CSS-Snippets um oder decodiere einen Data URI in ein herunterladbares Bild.

Der Base64-Bild-Encoder/-Decoder läuft vollständig in Ihrem Browser. Bilder, die Sie ablegen, und Data URIs, die Sie einfügen, werden auf Ihrem Gerät verarbeitet und nie zu ArrayKit hochgeladen.

Base64-Encoder/Decoder öffnen

Über Base64-Bild-Encoder / -Decoder

Der Base64-Bild-Encoder verwandelt jedes Bild in einen Base64-Data-URI, den Sie direkt in HTML oder CSS einfügen können. Legen Sie ein PNG, JPEG, WebP, SVG oder GIF ab, und er zeigt sofort den Data URI sowie produktionsreife Snippets — ein <img>-Tag mit bearbeitbarem Alt-Text und eine CSS-background-image-Regel —, jeweils mit Kopieren per Klick. Er nennt außerdem den MIME-Typ, die Dateigröße, die Pixelmaße und die String-Länge, damit Sie genau wissen, was Sie einbetten. Wechseln Sie in den Decodier-Modus, um einen Data URI einzufügen, das Bild anzuzeigen und es mit der richtigen Dateiendung herunterzuladen. Er ist für Frontend-Entwickler, E-Mail- und Template-Autoren und alle gedacht, die kleine Icons einbetten, um eine Anfrage zu sparen. Alles läuft lokal in Ihrem Browser, sodass Ihre Bilder auf Ihrem Gerät bleiben.

Funktionen

Per Drag-and-drop oder Klick PNG, JPEG, WebP, SVG und GIF in einen Base64-Data-URI kodieren
Kopieren per Klick des rohen Data URI, eines fertigen HTML-<img>-Tags und einer CSS-background-image-Regel
Bearbeitbarer Alt-Text, der für die Barrierefreiheit direkt in das erzeugte <img>-Snippet einfließt
Zeigt MIME-Typ, Dateigröße, Pixelmaße und Data-URI-Länge auf einen Blick
Der Decodier-Modus fügt einen Data URI ein, um das Bild anzuzeigen und mit der richtigen Endung herunterzuladen
Warnt, wenn ein Bild zu groß ist, um es effizient als Base64 einzubetten
Verarbeitet SVG und GIF ebenso wie Rasterfotos, mit sinnvollen Download-Endungen
Läuft vollständig in Ihrem Browser, sodass Bilder nie auf einen Server hochgeladen werden

So verwendest du Base64-Bild-Encoder / -Decoder

Lassen Sie den Tab Bild → Base64 ausgewählt und legen Sie ein Bild in der Ablagezone ab
Kopieren Sie den Base64-Data-URI, das HTML-<img>-Tag oder die CSS-background-image-Regel
Geben Sie optional einen Alt-Text ein, um ihn in das <img>-Snippet einzubacken
Wechseln Sie zu Base64 → Bild, fügen Sie einen Data URI ein und zeigen Sie das Bild an und laden es herunter

Beispiel

Eingabe

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…

Ausgabe

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…" alt="logo" />

Aus einem PNG wird ein eingebettetes <img>-Tag, das ohne zusätzliche Netzwerkanfrage lädt.

Häufige Fehler & Fehlerbehebung

Beim Einfügen eines Data URI erscheint 'The Data URI payload is not valid Base64.' — Kopieren Sie die gesamte Zeichenkette, die mit data:image/… beginnt und ';base64,' enthält, und entfernen Sie überflüssige Anführungszeichen oder Zeilenumbrüche aus Ihrem Editor.
Das decodierte Bild wird nicht angezeigt. — Prüfen Sie, ob der MIME-Typ zu den Daten passt — ein als image/jpeg gekennzeichneter PNG-Inhalt wird nicht gerendert. Kodieren Sie die Originaldatei neu, um einen korrekten Data URI zu erhalten.
Meine HTML- oder CSS-Datei ist nach dem Einbetten eines Bildes stark gewachsen. — Base64 fügt rund 33% Overhead hinzu, und eingebettete Bilder werden nicht separat zwischengespeichert. Betten Sie nur kleine Icons ein und verlinken Sie größere Bilder als normale Dateien.
Ein SVG-Data-URI aus einem anderen Tool sieht anders aus. — Manche Tools kodieren SVGs prozentkodiert statt mit Base64. Dieser Encoder verwendet immer Base64; beide sind gültige Data URIs, aber nicht Byte für Byte austauschbar.

Häufig gestellte Fragen

Was ist ein Base64-Bild-Data-URI?: Ein Data URI bettet ein Bild direkt in eine Zeichenkette wie data:image/png;base64,XXXX ein. Die Bildbytes werden Base64-kodiert, sodass Sie das ganze Bild ohne separate Datei oder Anfrage in ein HTML-src oder CSS-url() setzen können.
Welche Bildformate kann ich kodieren?: Jedes Bild, das Ihr Browser lesen kann — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF und ICO funktionieren. Der Decoder liest den MIME-Typ aus dem Data URI und bietet eine passende Download-Endung an.
Sollte ich Bilder als Base64 einbetten?: Einbetten eignet sich für kleine, häufig wiederverwendete Assets wie Icons oder E-Mail-Bilder, bei denen das Sparen einer Anfrage hilft. Bei größeren Bildern schadet es meist, weil Base64 etwa ein Drittel zur Größe hinzufügt und die Daten nicht eigenständig zwischengespeichert werden können.
Kann ich einen Data URI wieder in eine Bilddatei decodieren?: Ja. Wechseln Sie zu Base64 → Bild, fügen Sie die data:image/…;base64,-Zeichenkette ein, und das Tool zeigt das Bild an und lässt Sie es mit der richtigen Dateiendung herunterladen.
Werden meine Bilder beim Kodieren hochgeladen?: Nein. Der Encoder liest die Datei mit dem FileReader des Browsers und baut den Data URI auf Ihrem Gerät. Nichts wird an ArrayKit oder einen Server gesendet.
Warum ist die Base64-Zeichenkette größer als mein Bild?: Base64 stellt drei Bytes mit vier Zeichen dar, daher ist der kodierte Text rund 33% größer als die ursprünglichen Binärdaten, plus das kurze Präfix data:…;base64,. Dieser Overhead ist normal und zu erwarten.