Anleitung
- Wählen Sie Image → Base64 und eine Bilddatei aus oder wählen Sie Base64 → Image, um den umgekehrten Weg zu nutzen.
- Wählen Sie das gewünschte Ausgabeformat: Data-URL, reines Base64, ein HTML-img-Tag, eine CSS-background-image-Regel oder Markdown.
- Kopieren Sie das Ergebnis und fügen Sie es in Ihren Code, Ihre E-Mail-Vorlage oder Ihr JSON ein.
- Zum Decodieren fügen Sie eine Data-URL oder reines Base64 ein. Das Bild wird in der Vorschau angezeigt und kann heruntergeladen werden.
So funktioniert es
Base64 stellt Binärdaten mit 64 druckbaren Zeichen dar, sodass ein Bild direkt in Textformaten eingebettet werden kann. Eine Data-URL enthält davor den Medientyp, zum Beispiel data:image/png;base64, gefolgt von den codierten Bytes. Browser akzeptieren Data-URLs überall dort, wo eine Bild-URL verwendet werden kann: als src eines img-Tags, in einem CSS url() oder als SVG-Bildreferenz.
Der codierte Text ist immer etwa ein Drittel größer als die Originaldatei (4 Zeichen für je 3 Bytes). Kleine Symbole und Platzhalter direkt einzubetten kann eine separate Netzwerkanfrage sparen. Eingebettete Daten lassen sich jedoch nicht separat zwischenspeichern und werden mit jeder Seite oder jedem Stylesheet, das sie enthält, erneut geladen. Daher lohnt sich das oberhalb einiger Kilobyte selten. Viele E-Mail-Programme blockieren oder entfernen Bilder in Data-URLs. Testen Sie sie daher, bevor Sie sie in Newslettern verwenden.
Die Datei wird Byte für Byte codiert: Sie wird nicht erneut komprimiert, und in der Datei enthaltene Metadaten (z. B. EXIF) bleiben erhalten. Beim Decodieren akzeptiert das Tool eine vollständige Data-URL, reines Base64, URL-sicheres Base64 und Text, der zusammen mit einer CSS-url(…)-Klammer kopiert wurde. Der Bildtyp wird anhand der decodierten Bytes erkannt und nicht anhand der angegebenen Bezeichnung.
Beispiele
Kleines Symbol in einem Stylesheet
Ein 600 Byte großes PNG-Symbol wird zu einer 800 Zeichen langen Base64-Zeichenfolge. Mit der CSS-Ausgabe erhalten Sie eine background-image-Regel, die Sie in eine Klasse einfügen können, ohne eine separate Datei bereitzustellen.
Bild aus einer API-Antwort
Eine API gibt ein JSON-Feld zurück, etwa „iVBORw0KGgoAAAANSUhEUg…“. Fügen Sie es unter Base64 → Image ein, um das Bild anzuzeigen, seine Größe zu prüfen und es als PNG herunterzuladen.
SVG-Logo in HTML
Aus einem SVG wird eine Data-URL vom Typ data:image/svg+xml;base64, die in einem img-Tag funktioniert. Bei SVG ist der unkomprimierte SVG-Markup-Code oft kürzer als Base64. Ziehen Sie daher in Betracht, das SVG direkt einzubetten.
Häufig gestellte Fragen
Warum ist die Base64-Version größer als mein Bild?
Base64 verwendet 4 Textzeichen, um 3 Bytes zu speichern. Das entspricht einem Größenplus von etwa 33 %, zuzüglich einer kleinen Menge für den Data-URL-Präfix. Gzip- oder Brotli-Komprimierung auf einem Webserver verringert den Unterschied, beseitigt ihn aber nicht.
Wird das Bild beim Codieren verändert oder komprimiert?
Nein. Die exakten Bytes der Datei werden codiert, einschließlich aller Metadaten. Um die Zeichenfolge zu verkürzen, komprimieren oder verkleinern Sie das Bild vorher.
Was ist der Unterschied zwischen einer Data-URL und reinem Base64?
Reines Base64 besteht nur aus den codierten Bytes. Eine Data-URL ergänzt einen Präfix wie data:image/jpeg;base64,, der dem Browser den Dateityp mitteilt. So kann sie direkt als Bildquelle verwendet werden.
Gibt es eine Größenbeschränkung?
Hier können Dateien mit bis zu 10 MB codiert werden. Sehr lange Zeichenfolgen können Eingabefelder und Editoren verlangsamen. So große Data-URLs sind auf Websites außerdem nicht praktikabel.
Datenschutz
Codierung und Decodierung erfolgen in Ihrem Browser. Ihr Bild und der Base64-Text werden weder hochgeladen noch gespeichert oder in Analysedaten aufgenommen.