Bild-in-Base64-Konverter

So wandeln Sie ein Bild in Base64 um

1. Legen Sie ein Bild auf dem Feld ab, fügen Sie eines mit Strg+V (Cmd+V auf dem Mac) aus der Zwischenablage ein oder nutzen Sie die Dateiauswahl. Screenshots können direkt aus der Zwischenablage kommen; mehrere Dateien auf einmal sind kein Problem.
2. Verkleinern oder wandeln Sie es bei Bedarf vorher um: Geben Sie eine Max. Breite in Pixeln ein, wählen Sie unter Umwandeln in PNG, JPEG oder WebP, stellen Sie die Qualität ein oder aktivieren Sie Metadaten entfernen (EXIF).
3. Wählen Sie unter Ausgabe als ein Format. Diese Seite startet mit Data-URI.
4. Drücken Sie Ausgabe kopieren oder bei langen Ergebnissen Als .txt speichern.

Die Vorschau zeigt Dateiname, Größe, MIME-Typ und Pixelabmessungen. Unter den Schaltflächen sehen Sie Eingabegröße, Ausgabegröße und den Zuwachs in Prozent, damit Sie wissen, was Sie gleich einfügen.

Ausgabeformate und wohin sie gehören

Die Base64-Daten sind in jedem Format dieselben, nur die Hülle darum ändert sich. Die Beispiele unten verwenden ein PNG mit 32×32 Pixeln namens logo.png, gekürzt:

Die Ausgabe <img> enthält width und height, damit der Browser Platz reservieren kann, bevor das Bild dekodiert ist. Manche Markdown-Renderer, besonders auf gehosteten Plattformen, entfernen data:-URLs aus Bildern; prüfen Sie Ihren, bevor Sie sich auf die Markdown-Ausgabe verlassen.

Vor dem Kodieren skalieren und umwandeln

Base64 legt auf alles, was Sie hineingeben, ein Drittel drauf. Der beste Weg zu einer kurzen Zeichenkette ist daher ein kleineres Bild. Ein Handyfoto, das als Vorschaubild mit 300 Pixeln gezeigt wird, braucht seine ursprünglichen 4000 Pixel nicht. Setzen Sie Max. Breite auf 600, also auf die doppelte Anzeigegröße für scharfe High-DPI-Bildschirme; das spart weit mehr als jeder Kodierungstrick.

Was die Optionen bewirken:

• Max. Breite skaliert nur herunter. Schmalere Bilder behalten ihre Abmessungen, und das Seitenverhältnis bleibt immer erhalten.
• Umwandeln in JPEG füllt transparente Bereiche mit Weiß, weil JPEG keinen Alphakanal hat. Nehmen Sie WebP, wenn Sie Transparenz und geringe Größe zugleich brauchen.
• Qualität gilt für JPEG- und WebP-Ausgaben, sobald eine der anderen Optionen ein Neukodieren auslöst. PNG ist verlustfrei und ignoriert sie.
• Metadaten entfernen (EXIF) entfernt Kameradaten wie GPS-Koordinaten, Gerätemodell und Aufnahmezeit. Das geschieht durch Neuzeichnen des Bildes, ein JPEG wird also mit der gewählten Qualität erneut komprimiert.
• GIF, BMP und AVIF werden beim Neukodieren mit Format beibehalten als PNG geschrieben, da Browser diese Formate nicht aus einem Canvas erzeugen können. Ein animiertes GIF behält nur seinen ersten Frame.
• Safari kann kein WebP kodieren. Wählen Sie dort WebP, teilt Ihnen das Tool mit, dass stattdessen PNG erzeugt wurde.
• SVG-Dateien werden unverändert kodiert. Sie sind bereits Text, und eine Vektorgrafik zu rastern würde ihren Zweck zunichtemachen.

Ein PNG, das schon von einem Optimierer zusammengepresst wurde, kann nach dem Neukodieren größer herauskommen. Die Vorschau zeigt die neue Größe neben der ursprünglichen, vergleichen Sie also vor dem Kopieren.

Wann Sie ein Bild einbetten sollten und wann nicht

Eine Data-URI spart eine HTTP-Anfrage und hält alles in einer Datei. Das lohnt sich für:

• Icons, Logos und kleine UI-Grafiken von wenigen Kilobyte,
• HTML-Dokumente in einer Datei wie Berichte, Offline-Dokumentation oder exportierte Dashboards,
• winzige verschwommene Platzhalter, die angezeigt werden, während das echte Bild lädt,
• Test-Fixtures und JSON-Payloads, bei denen eine separate Datei umständlich ist.

Bei Fotos und allem Großen arbeitet sie gegen Sie. Die kodierte Kopie ist etwa 33 % größer, sie lässt sich nicht getrennt vom HTML oder CSS cachen, das sie enthält, und wird auf jeder Seite, die sie einbettet, erneut geladen. Ein Bild in einem Stylesheet verzögert außerdem das Stylesheet und damit das Rendern. Auch loading="lazy" hilft nicht: Die Bytes stecken bereits im Dokument. Mehr dazu unter Performance von Data-URIs, und der Größenrechner zeigt die kodierte Größe, bevor Sie sich festlegen.

E-Mail ist ein Sonderfall. Gmail und mehrere andere Webmail-Clients zeigen Bilder aus Data-URIs überhaupt nicht an, Newsletter verwenden daher normalerweise gehostete Bilder oder CID-Anhänge. Siehe Base64 in E-Mails.

Bilder für APIs und KI-Vision-Modelle

JSON kennt keinen Binärtyp, daher erwarten APIs, die ein Bild im Request-Body annehmen, Base64. Dazu gehören viele multimodale KI-Modelle, die ein Bild beschreiben, klassifizieren oder Text darin lesen können. Das Bild wird auf eine von zwei Arten übergeben:

• eine vollständige Data-URI in einer Zeichenkette: data:image/jpeg;base64,/9j/4AAQ...
• reines Base64 in einem Feld, mit dem Medientyp (image/jpeg) in einem anderen.

Verwenden Sie Data-URI für die erste und Reines Base64 für die zweite. Das data:-Präfix an eine API zu senden, die reines Base64 erwartet, oder umgekehrt, ist ein häufiger Grund, warum eine solche Anfrage abgelehnt wird. Diese Dienste begrenzen meist die Größe der Anfrage und verkleinern große Bilder oft ohnehin auf ihrer Seite. Vorheriges Skalieren hält die Anfrage also mit wenig Aufwand klein.

Bildformate, die Sie einbetten können

HEIC und TIFF lassen sich problemlos kodieren, aber eine Data-URI davon zeigt in Chrome und Firefox ein defektes Bild. Die Seiten zu HEIC und TIFF erklären, was Sie stattdessen tun können. Weitere Signaturen finden Sie unter häufige Base64-Präfixe.

Dasselbe im Code

Im Browser liefert FileReader direkt eine Data-URI:

function imageToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

In Python lesen Sie die Bytes und setzen das Präfix selbst davor:

import base64, mimetypes

def to_data_uri(path):
    mime = mimetypes.guess_type(path)[0] or "application/octet-stream"
    with open(path, "rb") as f:
        return f"data:{mime};base64,{base64.b64encode(f.read()).decode()}"

Weitere Varianten, auch für das Streamen großer Dateien, stehen unter Base64 in JavaScript und Base64 in Python.

Wenn das Bild nicht erscheint

• Defektes Bild in HTML. Wählen Sie für Data-URIs URL-sicher ab. Browser dekodieren data:-URLs nur mit dem Standardalphabet, und ein - oder _ anstelle von + oder / macht das Bild kaputt.
• Funktioniert in HTML, scheitert in CSS. Umbruch bei 76 fügt Zeilenumbrüche in die Zeichenkette ein. HTML-Attribute vertragen das, aber ein Zeilenumbruch in einem CSS-String url("...") macht die Regel ungültig. Lassen Sie den Umbruch für alles außer E-Mail-Texten ausgeschaltet.
• Doppeltes Präfix. Eine Zeichenkette, die mit data:image/png;base64,data:image/png;base64, beginnt, entstand, weil eine Data-URI in ein Template eingefügt wurde, das sein eigenes Präfix ergänzt. Verwenden Sie dort Reines Base64.
• Falsches oder gar kein Bild nach dem Dekodieren. Vergleichen Sie die ersten Zeichen mit der Tabelle oben. Passt der Anfang nicht zum Format, wurde die Zeichenkette abgeschnitten oder vertauscht. Base64 in Bild zeigt, was die Bytes wirklich sind.

Häufige Fragen