Base64-zu-Bild-Konverter

Inhalt zuletzt geprüft:

Sie fügen einen Base64-String ein, klicken auf Dekodieren und laden die fertige Bilddatei herunter. Der Konverter erkennt acht Bildformate, und das Ergebnis ist Byte für Byte mit der einst kodierten Datei identisch. Die Textform fällt dabei um ein Drittel länger aus.

Bildvorschau

Base64 einfügen und Dekodieren klicken, um eine Vorschau zu sehen

nach

Was ist Base64 und was ist eine data-URI?

Base64 schreibt binäre Daten, also auch eine fertige Bilddatei, als Kette gewöhnlicher Textzeichen. Die Umwandlung läuft in Schritten von drei Bytes. Ein Byte hat acht Bit, ein einzelnes Base64-Zeichen trägt sechs davon. Drei Bytes einer Datei passen deshalb in genau vier Textzeichen. Das Alphabet umfasst 64 Positionen: Großbuchstaben von A bis Z, Kleinbuchstaben von a bis z, Ziffern von 0 bis 9 sowie Plus und Schrägstrich. Reichen die Daten am Ende für eine volle Vierergruppe nicht aus, füllt ein Gleichheitszeichen die freien Stellen.[1]

Tabelle der vierundsechzig Base64-Zeichen mit den Nummern von 0 bis 63
Das gesamte Base64-Alphabet auf einem Bild. Die Zahl links neben jedem Paar ist der Wert von sechs Bit, das Zeichen daneben zeigt, wie dieser Wert im Text geschrieben wird. Auf den letzten beiden Positionen, 62 und 63, stehen Plus und Schrägstrich. Grafik: Arteon, eigene Darstellung.

So werden E-Mail-Anhänge übertragen, und ebenso gelangt ein Bild direkt in den Quelltext einer Seite, ohne eigene Datei auf dem Server.[2]

Die Zeichenkette allein sagt noch nicht, was sie zeigt. Das übernimmt erst die data-URI, deren Aufbau das Dokument RFC 2397 vom August 1998 beschreibt. Er lautet data:[Typ][;base64],Daten. Bei einem PNG-Bild sieht der Anfang so aus: data:image/png;base64, — und gleich hinter dem Komma folgt die eigentliche Kette. Fehlt die Typangabe, geht die Gegenseite von gewöhnlichem Text aus.[3]

Browser blockieren heute das Öffnen von data:-Adressen im Hauptfenster, weil auf diese Weise Phishing-Seiten verbreitet wurden.[4] Ein in einer solchen Adresse abgelegtes Bild betrachten Sie deshalb im Quelltext, der es enthält, oder in einem Werkzeug, das die Adresse liest. Fügen Sie die Kette in das Feld oben ein und drücken Sie die Schaltfläche Dekodieren.

Wie wandeln Sie Base64 in ein Bild um?

Fügen Sie die Kette in das Feld Base64 auf der linken Seite ein und drücken Sie die Schaltfläche Dekodieren. Das Bild erscheint in der Karte Bildvorschau, darunter steht die Schaltfläche Herunterladen, die die Datei unter dem Namen dekodiertes-bild speichert. Die Schaltfläche Alle löschen leert Feld und Vorschau zugleich.

Das Präfix data:image/png;base64, können Sie mit einfügen oder im Quelltext zurücklassen, aus dem Sie kopieren. Ohne Präfix liest der Konverter die ersten achtzehn Bytes der Daten und erkennt das Format an der Signatur der Datei selbst. Von dieser Erkennung hängt die Endung der heruntergeladenen Datei ab: Ein BMP-Bild wird als dekodiertes-bild.bmp gespeichert, ein Seitensymbol als dekodiertes-bild.ico.

Eine aus dem Quelltext einer E-Mail kopierte Kette ist meist alle 76 Zeichen umbrochen, und der Konverter liest sie genau in dieser Form. Der Standard, nach dem Browser Base64 lesen, verlangt, zuerst alle Leerraumzeichen aus den Daten zu entfernen, also auch Leerzeichen und Zeilenenden.[5] Eine über ein Dutzend Zeilen eingefügte Kette ergibt dasselbe Bild wie eine in einer einzigen Zeile.

Die gesamte Arbeit geschieht auf Ihrem Rechner. Die Kette bleibt im Speicher des geöffneten Tabs, die Datei entsteht auf Ihrem Gerät, und nach dem Schließen der Seite verschwindet beides aus dem Speicher des Browsers.

Über den Feldern steht ein Formatumschalter mit der Aufschrift Base64 nach JPG. Ein Klick auf eines der beiden Formate öffnet eine Liste, und die Auswahl daraus bringt Sie zur Seite des Konverters für dieses Paar. Die umgekehrte Richtung, also das Schreiben einer fertigen Datei als Zeichenkette, übernimmt der Bild-zu-Base64-Konverter.

Warum ist eine Base64-Kette länger als die Datei?

Die Textform braucht vier Zeichen für je drei Bytes, deshalb nimmt die Kette mehr Platz ein als die Daten, die sie beschreibt. Die Rechnung ist kurz: Sie teilen die Zahl der Bytes durch drei, runden auf und multiplizieren mit vier.

Aus dieser Formel ergeben sich zwei Zahlen, die die Größenordnung zeigen. Ein Seitensymbol wiegt 2.678 Bytes und ergibt kodiert 3.572 Zeichen. Ein Foto mit 1920 mal 1280 Pixeln wiegt 476.485 Bytes, seine Textform zählt 635.316 Zeichen. Der Zuwachs beträgt jedes Mal etwa ein Drittel, also rund 33 Prozent.[2] Um genau so viel wächst auch das Stylesheet oder die Nachrichtenvorlage, in die ein solches Bild eingefügt wird.

Base64 trägt Daten hinüber und verändert nichts an ihnen. Nach dem Dekodieren erhalten Sie eine Datei, die Byte für Byte der einst kodierten entspricht. Wir haben das an acht Dateien verschiedener Formate geprüft und dabei ihre Prüfsummen vor dem Kodieren und nach dem Zurücklesen verglichen.

Die Länge der Kette begrenzt der Browser selbst. Chromium und Firefox nehmen heute data:-Adressen bis 512 MB an, Safari bis 2048 MB. In Firefox verschob sich diese Grenze zweimal. Version 97 hob sie von 256 KB auf 32 MB an. Version 136 brachte sie auf die heutigen 512 MB.[4]

Welche Formate erkennt der Konverter?

Die Signatur besteht aus den ersten Bytes einer Datei, an denen sich ihr Format erkennen lässt, und der MIME-Typ ist der Name, den der Konverter in die data-URI schreibt. Der Konverter liest achtzehn solcher Bytes und benennt das Bild danach, sobald die Kette kein data-URI-Präfix trägt. Bei WebP steht die Kennung WEBP vier Bytes hinter RIFF, und die heruntergeladene Datei heißt dekodiertes-bild mit der Endung aus der letzten Spalte.
BildformatSignaturMIME-TypEndung
PNG89 50 4E 47image/png.png
JPGFF D8image/jpeg.jpg
WebPRIFF + WEBPimage/webp.webp
GIFGIF87a / GIF89aimage/gif.gif
AVIFftypavifimage/avif.avif
BMPBMimage/bmp.bmp
SVG<svg / <?xmlimage/svg+xml.svg
ICO00 00 01 00image/x-icon.ico
Alle acht Formate haben wir am 4. September 2026 in einem Browser auf Chromium-Basis geprüft, in beiden Formen der Kette: mit Präfix und ohne. Die Vorschau erscheint in beiden Fällen, und die heruntergeladene Datei erhält die Endung aus der letzten Spalte.

Wie viele Zeichen hat ein Bild in Base64?

Sechs Größen, die tatsächlich im Quelltext von Seiten landen. Alle stammen aus einem einzigen Foto, damit der Vergleich allein die Dateigröße betrifft, unabhängig davon, was das Bild zeigt.
BildMaße in PixelnDateigröße in BytesZeichen in der Base64-Kette
Seitensymbol als PNG32 × 322.6783.572
Grafik für die Seite als WebP800 × 600104.128138.840
Beitragsfoto als JPG1200 × 630157.419209.892
Bannerfoto als JPG1920 × 1280476.485635.316
Logo mit transparentem Hintergrund als PNG512 × 512577.420769.896
Kamerafoto als JPG3840 × 25601.405.5121.874.016
Die Zeichenzahl berechnen wir nach der Formel: Bytes geteilt durch drei, aufgerundet und mit vier multipliziert.[1] Das data-URI-Präfix kommt noch hinzu, von 22 Zeichen beim Typ image/png bis 26 Zeichen bei image/svg+xml.

Worin unterscheiden sich die beiden Base64-Alphabete?

Dasselbe Dokument beschreibt zwei Zeichensätze. Der erste geht in data-URIs und in die E-Mail, der zweite an Stellen, an denen Plus und Schrägstrich eine eigene Bedeutung tragen.
Bestandteil der KodierungStandardalphabetAlphabet für Adressen und Dateinamen
Zeichen mit der Nummer 62PlusBindestrich
Zeichen mit der Nummer 63SchrägstrichUnterstrich
FüllzeichenGleichheitszeichenGleichheitszeichen, in Tokens meist weggelassen
Wo Sie ihm begegnendata-URIs, Quelltext der Seite, E-Mail-AnhängeAdressparameter, JWT-Tokens, Dateinamen
Was mit einer solchen Kette zu tun istin das Feld einfügen und Dekodieren drückenjeden Bindestrich durch ein Plus und jeden Unterstrich durch einen Schrägstrich ersetzen, dann Dekodieren drücken
Beide Zeichensätze beschreibt RFC 4648: den Standardsatz in Abschnitt 4, den für Adressen gedachten in Abschnitt 5.[1]

Wo finden Sie eine Base64-Kette zum Einfügen?

Vier Orte, an denen ein Bild als Text abgelegt ist, samt Hinweis, welchen Teil Sie markieren.

  1. Der Quelltext der Seite enthält die Kette im Attribut src

    Öffnen Sie die Seite und drücken Sie Strg+U, auf dem Mac Cmd+Option+U. Suchen Sie im Quelltextfenster den Abschnitt data:image. Markieren Sie ihn zusammen mit der ganzen folgenden Kette, bis zum Anführungszeichen, das das Attribut src schließt.
  2. Das Stylesheet legt sie in der Eigenschaft background-image ab

    Ein Hintergrundbild steht dort oft als background-image: url("data:image/png;base64,…"). Fügen Sie nur die Adresse in das Feld ein, also den Teil vom Wort data bis zum schließenden Anführungszeichen, ohne url( am Anfang und ohne die Klammer am Ende.
  3. Eine E-Mail trägt sie in ihrem Quelltext

    Die Quelltextansicht einer Nachricht zeigt die im Text eingebetteten Bilder. Ihnen geht die Kopfzeile Content-Transfer-Encoding: base64 voraus, die Kette selbst beginnt nach einer Leerzeile und ist alle 76 Zeichen umbrochen. Kopieren Sie sie vollständig, samt diesem Umbruch.
  4. Eine API-Antwort übergibt sie als Feldwert

    JSON überträgt ausschließlich Text, deshalb liefern Dienste ein Bild eben in Base64, als Wert eines einzelnen Feldes. Kopieren Sie den Inhalt dieses Feldes ohne die umgebenden Anführungszeichen.

Was tun Sie mit dem Bild nach dem Dekodieren?

Die heruntergeladene Datei ist ein gewöhnliches Bild und geht in jedes weitere Werkzeug ein.

  1. Das Bild bekommt neue Maße

    Eine aus dem Quelltext gezogene Datei hat die Maße, die jemand für jene Seite gewählt hat. Neue geben Sie ihr im Bildeditor, in dem Sie den Ausschnitt beschneiden und die Zielbreite angeben.
  2. Die Datei geht auf eine Website

    Ein aus dem Stylesheet gezogenes PNG wiegt meist mehr, als eine heutige Seite braucht. Eine leichtere Datei mit erhaltener Transparenz liefert der PNG-zu-WebP-Konverter.
  3. Die dekodierte Datei erwies sich als Seitensymbol

    Die Endung .ico bedeutet, dass die dekodierte Datei das Symbol einer Website ist. Die übrigen Symbolgrößen samt fertiger Tags zum Einfügen in den Quelltext liefert der Favicon-Generator.
  4. Die umgekehrte Richtung

    Ihr eigenes Bild wird im Bild-zu-Base64-Konverter zu einer Kette, die Sie sofort in den Quelltext einfügen können. Es ist dasselbe Werkzeugpaar, nur umgedreht.

Andere Dateien in JPG konvertieren

Quellen

  1. RFC 4648: The Base16, Base32, and Base64 Data EncodingsIETF
  2. Base64Wikipedia
  3. RFC 2397: The "data" URL schemeIETF
  4. Data-URLsMDN Web Docs
  5. Infra Standard, forgiving base64 decodeWHATWG

Die Dateigrößen in den Tabellen haben wir gemessen, indem wir fertige Bilder in einem Browser durch diesen Konverter geschickt haben, und geben sie so an, wie das Werkzeug sie zählt. Die Angaben zu beiden Formaten stützen sich auf die oben genannten Quellen.

Inhalt zuletzt geprüft: · erstellt und geprüft vom Arteon-Team

Häufige Fragen zur Umwandlung von Base64 in ein Bild

Was tun, wenn die Kette kein Präfix data:image/… hat?

Fügen Sie die Kette allein ein und drücken Sie Dekodieren. Der Konverter liest die ersten achtzehn Bytes der Daten, erkennt daran das Format und ergänzt das fehlende Präfix selbst, bevor er die Vorschau zeichnet.

Gelangt die eingefügte Kette an einen Server?

Die gesamte Arbeit geschieht in Ihrem Browser. Die Kette bleibt vom Einfügen bis zum Schließen der Seite im Speicher des Tabs, und die Datei, die Sie herunterladen, entsteht auf Ihrem eigenen Gerät.

Verändert das Dekodieren die Bildqualität?

Die dekodierte Datei ist Byte für Byte mit der kodierten identisch. Base64 trägt die Daten in einer anderen Form und entfernt nichts daraus, die Qualität hängt also allein vom Original ab.

Die Kette hat Bindestriche und Unterstriche statt Plus und Schrägstrich. Was nun?

Das ist das Alphabet für Adressen und Dateinamen, beschrieben in Abschnitt 5 des Dokuments RFC 4648. Ersetzen Sie im Editor jeden Bindestrich durch ein Plus und jeden Unterstrich durch einen Schrägstrich, fügen Sie das Ergebnis in das Feld ein und drücken Sie Dekodieren.

Wie lang darf die Kette für den Browser sein?

Chromium und Firefox verarbeiten heute data:-Adressen bis 512 MB, Safari bis 2048 MB. Ein Kamerafoto ergibt kodiert eine Kette von unter zwei Millionen Zeichen, also weniger als 2 MB Text, und bleibt damit weit innerhalb dieser Grenzen.

Warum zeigt eine in die Adressleiste eingefügte Kette kein Bild?

Browser blockieren das Öffnen von data:-Adressen im Hauptfenster, weil auf diese Weise Phishing-Seiten verschickt wurden. Ein Bild aus einer solchen Adresse sehen Sie im Quelltext, der es enthält, oder in diesem Konverter.

Öffnet der Konverter auch eine mit Prozentzeichen geschriebene Adresse, ohne Base64?

Ja. Eine Adresse in der Form data:image/svg+xml,%3Csvg… fügen Sie genauso ein wie jede andere, und die heruntergeladene Datei erhält die Endung .svg. Diese Schreibweise verwenden Build-Werkzeuge, wenn sie Vektorgrafik direkt in den Quelltext setzen.

Wie wandle ich mein eigenes Bild in eine Base64-Kette um?

Die umgekehrte Richtung übernimmt der Bild-zu-Base64-Konverter. Dort laden Sie eine Datei hoch, und das Werkzeug gibt eine fertige data-URI zum Einfügen in den Quelltext zurück.

Screenshot des kostenlosen Arteon-Werkzeugs: Base64-zu-Bild-Konverter

Helfen Sie uns, unsere Werkzeuge zu verbessern

Haben Sie eine Idee, einen Fehler gefunden oder einen Vorschlag? Schreiben Sie uns – wir antworten innerhalb von 24 Stunden.

Entdecken Sie weitere nützliche Werkzeuge

JPG zu WebP

JPG zu WebP

JPG-Fotos in leichtes WebP umwandeln. Bildgewicht um bis zu 35% reduzieren.

Bildeditor

Bildeditor

Bildgröße ändern, zuschneiden und Format konvertieren. Fertige Formate für Social Media, runde Avatare, Export als JPG/PNG/WebP.

Meta-Tag-Checker

Meta-Tag-Checker

Titel- und Beschreibungslänge in Pixeln prüfen. Live-Google-Vorschau und Optimierungstipps.

PNG zu JPG

PNG zu JPG

PNG-Dateien im Browser in JPG umwandeln. Ohne Dateilimit, ohne Registrierung.

Favicon-Generator

Favicon-Generator

Erstellen Sie ein komplettes favicon.ico-Set für Ihre Website aus einem Bild. Alle erforderlichen Größen, ohne Anmeldung.

Farbpaletten-Generator

Farbpaletten-Generator

9 Paletten aus einer Farbe generieren: monochromatisch, komplementär, triadisch und mehr. HEX-Codes.

WebP zu JPG

WebP zu JPG

WebP-Dateien in universell kompatibles JPG umwandeln. Funktioniert überall.

Farbkontrast-Checker

Farbkontrast-Checker

Text- und Hintergrundkontrast nach WCAG 2.1 AA und AAA prüfen. Automatische Farbkorrektur.

Kostenloser QR-Code-Generator

Kostenloser QR-Code-Generator

Erstellen Sie einen QR-Code für Website, vCard-Visitenkarte oder Druck. Export PNG und SVG, ohne Registrierung.

Wort- & Zeichenzähler

Wort- & Zeichenzähler

Wörter, Zeichen, Sätze und Lesezeit zählen. Lesbarkeit mit dem Flesch-Kincaid-Wert prüfen.