Bild → Base64-Konverter

Beliebiges Bild zu einer Base64-Daten-URI codieren oder eine Daten-URI einfügen, um sie zurück in ein Bild zu dekodieren. Ergebnis kopieren oder CSS-url()-Snippet nehmen. Nichts verlässt Ihr Gerät.

So funktioniert Bild zu Base64

Image to Base64 liest Ihre Bilddatei und kodiert sie als Base64-Daten-URI, die Sie direkt in HTML, CSS oder JSON einbetten können, ohne eine separate Dateianfrage zu benötigen. Die Konvertierung nutzt die FileReader-API in Ihrem Browser; keine Bytes Ihres Bildes werden an einen Server gesendet. Sie können auch einen Base64-String einfügen, um ihn zurückzudekodieren und das Bild in der Vorschau anzusehen, alles lokal.

Eine Base64-Daten-URI ist etwa 33% größer als das binäre Original, da jede Gruppe von drei Bytes zu vier ASCII-Zeichen expandiert. Diese Größenzunahme ist der erwartete Kompromiss für den Komfort, ein Bild in ein Dokument oder Stylesheet einzubetten. Das Tool zeigt Ihnen sowohl den rohen Base64-String als auch ein fertiges HTML-img-Tag-Snippet und ein CSS-background-image-Snippet für schnelles Kopieren und Einfügen in Ihr Projekt.

Verfasst von Bastien Sulyan

So wird Bild zu Base64 verwendet, Schritt für Schritt

Ziehen Sie eine Bilddatei auf den Upload-Bereich oder klicken Sie, um zu suchen. Akzeptierte Formate: JPEG, PNG, WebP, GIF, SVG.
Der Base64-Daten-URI erscheint sofort im Ausgabefeld.
Kopieren Sie den rohen Base64-String oder verwenden Sie das vorformatierte HTML-img-Tag oder das CSS-background-image-Snippet.
Zum Dekodieren füge einen Base64-String in das Eingabefeld ein und wechsle in den Dekodierungsmodus, um das Bild in der Vorschau zu sehen.
Klicken Sie auf die Kopierschaltfläche neben einem Snippet, um es in die Zwischenablage zu kopieren.

Häufige Anwendungsfälle

Ein Frontend-Entwickler bettet ein kleines Symbol als Daten-URI in eine CSS-Datei ein, um eine zusätzliche HTTP-Anfrage zu vermeiden.
Ein Entwickler bettet einen winzigen Lade-Spinner als Base64-src-Attribut ein, damit das Platzhalter-Bild verfügbar ist, bevor das JavaScript-Bundle lädt.
Eine QA-Ingenieurin kopiert den Base64 eines Testbildes direkt in eine JSON-Payload für einen API-Test.
Ein E-Mail-Vorlagenbauer bettet ein Signaturlogo als Base64-Daten-URI ein, da einige E-Mail-Clients externe Bildanfragen blockieren.

Häufig gestellte Fragen

Warum ist die Base64-Ausgabe etwa ein Drittel größer als meine Originaldatei?

Base64-Kodierung stellt je drei Binär-Bytes als vier ASCII-Zeichen dar (Verhältnis 4/3). Ein Bild von 100 KB in Binärform wird zu einem Base64-String von ungefähr 133 KB. Das ist eine Eigenschaft des Kodierungsschemas, keine Tool-Einschränkung.

Werden die Bildinhalte während der Kodierung an einen Server übertragen?

Nein. Die FileReader-API liest die Binärdatei von Ihrer lokalen Festplatte und übergibt das Ergebnis direkt an die JavaScript-Kodierungsfunktion innerhalb Ihres Browser-Tabs. Die Bilddaten verlassen Ihr Gerät nicht.

Kann ich die Daten-URI-Ausgabe in jedem HTML- oder CSS-Kontext verwenden?

Ja. Eine Daten-URI, die mit data:image/jpeg;base64, gefolgt vom kodierten String beginnt, kann als src-Attribut eines img-Tags oder als url()-Wert in einer CSS-background-image-Eigenschaft verwendet werden. Alle modernen Browser unterstützen Daten-URIs. Sehr große Daten-URIs können das Seiten-Rendering verlangsamen, daher ist das Einbetten in der Regel kleinen Bildern unter wenigen Kilobyte vorbehalten.

Unterstützt das Tool animierte GIFs?

Das Tool kodiert den vollständigen binären Inhalt jeder von Ihnen bereitgestellten Datei, einschließlich animierter GIFs. Die resultierende Daten-URI spielt als src eines img-Tags die Animation in Browsern ab, die GIF-Animationen unterstützen.

Wie kann ich einen Base64-String zurück in ein Bild dekodieren?

Wechseln Sie das Tool in den Dekodierungsmodus, fügen Sie Ihren Base64-String (mit oder ohne data:-Präfix) ein, und das Tool dekodiert ihn, bietet das binäre Bild zum Herunterladen an und zeigt eine Vorschau.