Wie bette ich ein Base64-Bild in HTML ein?

Nutze die Data-URL-Ausgabe und füge sie als `src` eines ` `-Tags ein, oder wähle direkt das Ausgabeformat **HTML ` `** — das Tool erzeugt bereits das komplette Tag.

Wie verwende ich ein Base64-Bild in CSS?

Kopiere die Ausgabe `CSS url()`. Sie liefert etwas wie `url('data:image/png;base64,...')`, direkt einsetzbar in `background-image` oder `content`.

Was ist der Unterschied zwischen reinem Base64 und einer Data-URL?

**Reines Base64** ist nur die kodierte Zeichenfolge ohne Kontext — nützlich für JSON-Felder oder API-Payloads. Die **Data-URL** enthält bereits das Präfix `data:mimetype;base64,` und funktioniert direkt als `src` eines Bildes oder als CSS-Wert.

Warum ist die Base64-Datei größer als das Original?

Das Kodieren von Binärdaten als Base64-Text erhöht die Größe um rund 33 % — der Preis dafür, dass jeweils 3 Bytes als 4 Zeichen dargestellt werden. Bei kleinen Icons ist der Overhead vernachlässigbar, bei großen Fotos kann er das HTML oder CSS aber deutlich aufblähen.

Wie groß darf die Datei maximal sein?

Bis zu 20 MB. Bei größeren Bildern wird die resultierende Zeichenfolge sehr lang und kann die Seite spürbar verlangsamen — dann lohnt sich separates Hosting der Datei.

Verschlechtert die Umwandlung in Base64 die Bildqualität?

Nein. Base64 ist eine verlustfreie Kodierung — sie wandelt Binärdaten in Text um und zurück, ohne auch nur ein Pixel zu verändern.

Wird mein Bild auf einen Server hochgeladen?

Nein. Die gesamte Umwandlung läuft lokal über die `FileReader API`. Dein Bild verlässt dein Gerät nie.

Sollte ich Base64 für alle Bilder auf meiner Website nutzen?

Nein. Sinnvoll ist es bei kleinen Icons und Logos (unter 5–10 KB), wo der Wegfall des HTTP-Requests den Overhead von rund 33 % ausgleicht. Große Fotos laden meist schneller, wenn sie separat gehostet werden und vom Browser-Cache profitieren.

Wie dekodiere ich Base64 wieder zu einem Bild?

Füge die Base64-Zeichenfolge in den Konverter [Base64 to Image](/de/tools/base64-zu-bild) ein — er geht den umgekehrten Weg und zeigt das dekodierte Bild mit Download-Option.

Bild zu Base64

Bild hochladen und in eine Base64-Daten-URL für HTML, CSS oder JSON konvertieren — kostenloser Konverter für PNG, JPEG, SVG, WebP. Kein Server-Upload.

Aktualisiert März 2026

Geprüft von Rafael Duarte

Kodieren Dekodieren Bild → Base64 Base64 → Bild

Bild hier ablegen oder durchsuchen

PNG, JPG, GIF, SVG, WebP · Max. 20 MB

PNGJPGSVGWEBPGIF

Geschwindigkeit

—

Datenschutz

Nur Lokal

Nutzdaten

0 KB

Schnelle Kodierung

Asynchrone Verarbeitung verarbeitet große Dateien, ohne die Benutzeroberfläche zu blockieren.

Lokale Verarbeitung

Assets werden im Browser kodiert. Daten verlassen niemals Ihren Computer.

Data-URI-Unterstützung

Direkt CSS-, HTML- und Data-URL-fertige Zeichenfolgenformate generieren.

Bild in Base64 umwandeln – so funktioniert's

Vier Ausgabeformate, ein Klick zum Kopieren

1. Bild auswählen

PNG, JPG, GIF, SVG oder WebP bis 20 MB — per Drag & Drop ablegen oder über den Dateidialog hochladen.

2. Ausgabeformat wählen

Reines Base64, vollständige Data-URL, fertiges HTML-`<img>`-Tag oder CSS-`url()`-Wert.

3. Ergebnis kopieren

Auf Kopieren klicken oder Shift+Enter drücken, um die kodierte Zeichenfolge zu übernehmen.

Was dieser Base64-Bildkonverter kann

Mehr als nur eine Zeichenfolge ausspucken

Vier Ausgabeformate auf einen Blick

Reines Base64, komplette Data-URL, einsatzbereites <img>-Tag oder CSS-url()-Wert — je nachdem, wo du das Ergebnis brauchst.

Dateimetadaten sofort sichtbar

Abmessungen, Originalgröße und kodierte Größe werden angezeigt, bevor du überhaupt etwas kopierst.

Vorschau mit Zoom

Prüfe das Bild visuell, bevor du es in deinen Code einbettest.

Läuft komplett im Browser

Die FileReader API liest die Datei lokal — dein Bild verlässt nie das Gerät, und das Tool funktioniert nach dem Laden sogar offline.

Tastenkürzel für den ganzen Workflow

Shift+Enter kopiert das Ergebnis, Shift+Pfeiltaste wechselt zwischen den vier Base64-Tools (Encode, Decode, Bild→Base64 und Base64→Bild), ganz ohne Maus.

Verarbeitungszeit in Millisekunden

Eine Stoppuhr zeigt, wie lange Einlesen und Kodierung der Datei dauern — praktisch, um zu prüfen, ob ein großes Bild den Browser ausbremst.

Beispiele

Ausgabeformat

Ergebnis

Reines Base64

iVBORw0KGgoAAAANSUhEUgAA...

Data-URL

data:image/png;base64,iVBORw0K...

HTML <img>

CSS url()

url('data:image/png;base64,...')

SVG (MIME automatisch erkannt)

data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...

Wann du dieses Tool brauchst

Die häufigsten Szenarien, in denen Entwickler Bilder zu Base64 kodieren

Weniger HTTP-Requests

Kleine Icons und Logos (unter 5–10 KB) werden direkt mit HTML oder CSS ausgeliefert — ohne zusätzlichen Netzwerk-Roundtrip.

Eigenständige HTML-Dateien

Einzeldatei-Demos, E-Mail-Vorlagen oder Offline-Dokumentation funktionieren ohne externe Abhängigkeiten.

Bilder in E-Mails

Viele deutsche Webmailer wie GMX oder WEB.DE blockieren standardmäßig extern nachgeladene Bilder, zeigen eingebettete Data-URLs aber problemlos an.

API-Payloads

Webhooks und REST-APIs, die Bilder übertragen, erwarten den Bildinhalt oft als Base64-String im Request-Body.

Canvas und WebGL

Ein Base64-String umgeht die CORS-Beschränkungen, die für extern gehostete Bilder gelten.

Der umgekehrte Weg

Um Base64 einzufügen und das Bild wieder sichtbar zu machen, nutze [Base64 to Image](/de/tools/base64-zu-bild).

Häufige Fragen und Fehler

Reines Base64 als Data-URL einsetzen

Die Ausgabe Reines Base64 enthält kein data:image/...;base64,-Präfix — wer sie direkt in das src eines <img>-Tags oder in ein CSS-url() einfügt, bekommt ein kaputtes Bild. Für direktes Einfügen im Code die Ausgabe Data-URL oder HTML <img> verwenden.

Bild zu groß zum Einbetten

Oberhalb von 20 MB lehnt das Tool die Datei ab. Aber schon deutlich darunter wiegt ein großes Foto als Base64 rund 33 % mehr als das Original und verliert den unabhängigen Browser-Cache. Für große Bilder lohnt sich separates Hosting.

Eine Datei ausgewählt, die kein Bild ist

PDFs, Videos und andere Dokumente lösen eine Fehlermeldung aus — akzeptiert werden nur image/*-Formate (PNG, JPG, GIF, SVG, WebP).

Die Bildqualität ändert sich nicht

Base64 ist eine verlustfreie Kodierung — die Zeichenfolge repräsentiert exakt dieselben Pixel wie die Originaldatei.

Das `<img>`-Tag ohne `alt`-Text übernehmen

Die Ausgabe HTML <img> hat standardmäßig ein leeres alt="" — vor der Veröffentlichung mit einer echten Bildbeschreibung ergänzen, sonst gehen Barrierefreiheit und ein SEO-Signal verloren.

Ein Base64-SVG als grundsätzlich sicher behandeln

Ein SVG kann ein eingebettetes <script> enthalten. Als src eines <img>-Tags wird dieses Skript nicht ausgeführt, aber wenn die Data-URL direkt geöffnet oder in <object>/<iframe> verwendet wird, bleibt der aktive Inhalt der Originaldatei erhalten. Nur SVGs aus vertrauenswürdiger Quelle wiederverwenden.

Warum hier kodieren

Die gesamte Umwandlung läuft im Browser über die FileReader API — dein Bild verlässt nie das Gerät, und das Tool funktioniert nach dem Laden der Seite auch offline weiter.

Die vier Ausgabeformate ersparen dir das manuelle Zusammenbauen von <img>-Tag oder CSS-url() — einfach das passende Format kopieren und direkt in den Code einfügen.

Das Tool gehört zu einer Familie von vier Base64-Konvertern — Encode, Decode, Bild→Base64 und Base64→Bild —, zwischen denen du mit Shift+Pfeiltaste wechselst, ohne die Tastatur zu verlassen.

Häufig gestellte Fragen

Nutze die Data-URL-Ausgabe und füge sie als src eines <img>-Tags ein, oder wähle direkt das Ausgabeformat HTML <img> — das Tool erzeugt bereits das komplette Tag.

Weiterführende Links

MDN — FileReader API

Offizielle Dokumentation der API, mit der Bilddateien lokal im Browser gelesen werden.

MDN — Data-URLs

Vollständige Referenz zum Format data:image/...;base64,..., wie es in HTML und CSS verwendet wird.

RFC 2397 — The "data" URL scheme

Ursprüngliche IETF-Spezifikation, die das data:-Schema definiert, auf dem jede hier erzeugte Data-URL-Ausgabe basiert.