Base64-zu-Bild-Konverter
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
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]

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?
| Bildformat | Signatur | MIME-Typ | Endung |
|---|---|---|---|
| PNG | 89 50 4E 47 | image/png | .png |
| JPG | FF D8 | image/jpeg | .jpg |
| WebP | RIFF + WEBP | image/webp | .webp |
| GIF | GIF87a / GIF89a | image/gif | .gif |
| AVIF | ftypavif | image/avif | .avif |
| BMP | BM | image/bmp | .bmp |
| SVG | <svg / <?xml | image/svg+xml | .svg |
| ICO | 00 00 01 00 | image/x-icon | .ico |
Wie viele Zeichen hat ein Bild in Base64?
| Bild | Maße in Pixeln | Dateigröße in Bytes | Zeichen in der Base64-Kette |
|---|---|---|---|
| Seitensymbol als PNG | 32 × 32 | 2.678 | 3.572 |
| Grafik für die Seite als WebP | 800 × 600 | 104.128 | 138.840 |
| Beitragsfoto als JPG | 1200 × 630 | 157.419 | 209.892 |
| Bannerfoto als JPG | 1920 × 1280 | 476.485 | 635.316 |
| Logo mit transparentem Hintergrund als PNG | 512 × 512 | 577.420 | 769.896 |
| Kamerafoto als JPG | 3840 × 2560 | 1.405.512 | 1.874.016 |
Worin unterscheiden sich die beiden Base64-Alphabete?
| Bestandteil der Kodierung | Standardalphabet | Alphabet für Adressen und Dateinamen |
|---|---|---|
| Zeichen mit der Nummer 62 | Plus | Bindestrich |
| Zeichen mit der Nummer 63 | Schrägstrich | Unterstrich |
| Füllzeichen | Gleichheitszeichen | Gleichheitszeichen, in Tokens meist weggelassen |
| Wo Sie ihm begegnen | data-URIs, Quelltext der Seite, E-Mail-Anhänge | Adressparameter, JWT-Tokens, Dateinamen |
| Was mit einer solchen Kette zu tun ist | in das Feld einfügen und Dekodieren drücken | jeden Bindestrich durch ein Plus und jeden Unterstrich durch einen Schrägstrich ersetzen, dann Dekodieren drücken |
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.
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 Abschnittdata:image. Markieren Sie ihn zusammen mit der ganzen folgenden Kette, bis zum Anführungszeichen, das das Attributsrcschließt.Das Stylesheet legt sie in der Eigenschaft background-image ab
Ein Hintergrundbild steht dort oft alsbackground-image: url("data:image/png;base64,…"). Fügen Sie nur die Adresse in das Feld ein, also den Teil vom Wortdatabis zum schließenden Anführungszeichen, ohneurl(am Anfang und ohne die Klammer am Ende.Eine E-Mail trägt sie in ihrem Quelltext
Die Quelltextansicht einer Nachricht zeigt die im Text eingebetteten Bilder. Ihnen geht die KopfzeileContent-Transfer-Encoding: base64voraus, die Kette selbst beginnt nach einer Leerzeile und ist alle 76 Zeichen umbrochen. Kopieren Sie sie vollständig, samt diesem Umbruch.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.
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.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.Die dekodierte Datei erwies sich als Seitensymbol
Die Endung.icobedeutet, 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.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
- RFC 4648: The Base16, Base32, and Base64 Data Encodings — IETF
- Base64 — Wikipedia
- RFC 2397: The "data" URL scheme — IETF
- Data-URLs — MDN Web Docs
- Infra Standard, forgiving base64 decode — WHATWG
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.

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.







