Bilder / MULTIVERTO

Bild in Base64 und Base64 in Bild

Kodieren Sie eine Bilddatei als Base64-Daten-URL oder dekodieren Sie Bild-Base64 mit Vorschau und Download.

Sofort umrechnenDie Datei wird in diesem Browser verarbeitet.
Dieses Tool einbetten

Wählen Sie die Startansicht des Widgets.

Wählen Sie die Startansicht des Widgets.

Werte im veröffentlichten Code sind für alle lesbar. Keine privaten Tokens oder Dateien einfügen.

Widget-Vorschau ↗

02 / Anleitung

Bild in Base64 und Base64 in Bild — So funktioniert es

Bilddaten sind Bytes; Base64 stellt sie als Text dar

Beim Kodieren eines Bildes in Base64 werden die Bytes einer PNG-, JPEG-, WebP-, GIF- oder sicheren SVG-Datei mit dem Base64-Alphabet dargestellt. Das Ergebnis ist hier eine Daten-URL: Sie beginnt mit einem MIME-Typ wie data:image/png;base64, und enthält danach die kodierten Bytes. Eine solche URL kann als Bildquelle oder als Texteingabe für eine Schnittstelle dienen. Kodierung verkleinert das Bild nicht und ändert seine sichtbare Qualität nicht. Der Base64-Text benötigt typischerweise ungefähr ein Drittel mehr Platz als die ursprünglichen Binärdaten, noch ohne den Vorspann.

Die Seite führt auch die Umkehrung aus. Wählen Sie Base64 in Bild, fügen Sie eine vollständige Daten-URL oder reinen Base64-Text ein und bestimmen Sie bei fehlendem Vorspann den Bildtyp. Das Werkzeug dekodiert die Zeichen, prüft die Dateisignatur, zeigt eine Vorschau und bietet einen Download. Beide Richtungen sind Schritte desselben Arbeitsablaufs; eine umschaltbare Seite vermeidet zwei fast identische Inhalte.

Ein kleines Beispiel mit Rückweg

Ein kodiertes PNG mit nur einem Pixel beginnt als Daten-URL mit data:image/png;base64,. Der Nutzteil kann mit Zeichen wie iVBORw0KGgo anfangen. Dieser Anfang stammt von der PNG-Dateisignatur; der übrige Text trägt die eigentlichen Bilddaten. Fügen Sie die ganze Daten-URL in der Gegenrichtung ein. Die Vorschau sollte wieder dasselbe Bild zeigen. Der Download enthält die dekodierten Bytes. Dabei wird die Bitmap nicht erneut gezeichnet, sodass ein gültiger Hin- und Rückweg die ursprünglichen Dateibytes erhalten kann.

Ein winziges eingebettetes Symbol kann in einem eigenständigen HTML-Beispiel oder API-Test praktisch sein. Auf einer üblichen Website lässt sich eine separate Bilddatei oft leichter zwischenspeichern, austauschen und überprüfen. Vergleichen Sie die tatsächlichen Nutzlastgrößen vor dem Einbetten. Ein Bild mit mehreren Megabytes erzeugt eine lange Zeichenfolge, macht Quellcode schwer lesbar und kann Kopieren oder Verarbeiten im Browser verlangsamen.

Formatkontrolle, Sicherheit und Irrtümer

Base64 ist eine Kodierung und keine Verschlüsselung. Wer die Zeichenfolge lesen kann, kann das Bild wiederherstellen. Veröffentlichen Sie daher kein privates Foto, nur weil es kodiert wurde. Fehlt der Daten-URL-Vorspann, muss der echte MIME-Typ gewählt werden; die Bezeichnung PNG verwandelt JPEG-Bytes nicht in PNG. Der Dekoder prüft typische Dateisignaturen und weist Widersprüche zurück, statt einen falsch bezeichneten Download anzubieten. Leerzeichen aus kopiertem Base64 sind tolerierbar, unvollständige Daten nicht.

Anders als ein Base64-Textkonverter verarbeitet dieses Werkzeug die Bytes der Bilddatei, nicht ihren Namen oder eine Bildbeschreibung. SVG-Dateien müssen sicher und eigenständig sein. Eine Größenbeschränkung schützt vor sehr langen Zeichenfolgen im Browser. Misslingt die Vorschau nach dem Dekodieren, prüfen Sie den vollständigen Ursprungstext und die Übereinstimmung des angegebenen MIME-Typs.

Bild in Base64 und Base64 in Bild — So funktioniert es
  1. Bilddaten sind Bytes; Base64 stellt sie als Text dar
  2. Ein kleines Beispiel mit Rückweg
  3. Formatkontrolle, Sicherheit und Irrtümer