T
image base64 convert data-uri

Schneller Bild-zu-Base64-Konverter: Optimieren Sie Ihre Web-Assets

Konvertieren Sie Bilder sofort in Base64-Data-URIs. Reduzieren Sie HTTP-Anfragen und beschleunigen Sie die Leistung Ihrer Website.

2026-04-09 Dieses Tool verwenden

Was ist Base64?

Base64 ist ein Binär-zu-Text-Kodierungsschema, das Binärdaten mithilfe von 64 druckbaren ASCII-Zeichen darstellt: die Großbuchstaben A–Z, die Kleinbuchstaben a–z, die Ziffern 0–9 sowie die Symbole + und /. Ein Auffüllzeichen = wird am Ende hinzugefügt, wenn die Eingabelänge kein Vielfaches von drei Bytes ist.

Der Name „Base64" leitet sich direkt von der Größe dieses Zeichensatzes ab. Da jedes Zeichen im Satz genau mit 6 Bits dargestellt werden kann (2⁶ = 64), kodiert Base64 drei Bytes (24 Bits) Binärdaten in vier druckbare Zeichen (4 × 6 Bits = 24 Bits) — eine verlustfreie, umkehrbare Kodierung.

Base64 wurde ursprünglich für E-Mail-Systeme (MIME) entwickelt, die nur Textdaten zuverlässig übertragen konnten. Heute wird es überall eingesetzt, wo Binärdaten durch textbasierte Kanäle übertragen werden müssen — von E-Mail-Anhängen und JSON-Nutzdaten bis zu HTML-Data-URIs und JWTs.

Warum Bilder in Base64 kodieren?

Die Hauptmotivation ist das direkte Einbetten von binären Bilddaten in ein Textdokument. Eine PNG- oder JPEG-Datei ist reine Binärdaten; sie kann nicht ohne Kodierung in eine HTML-Datei oder ein JSON-Objekt eingefügt werden. Base64 löst dies, indem es einen reinen Textstring erzeugt, der sicher überall dort platziert werden kann, wo Text akzeptiert wird.

Hauptgründe, warum Entwickler Base64-Bildkodierung nutzen

  1. HTTP-Anfragen eliminieren — Das Inlinen eines Bildes entfernt eine Netzwerkanfrage vollständig. Für kleine Icons oder dekorative Elemente kann das den Critical Rendering Path merklich verkürzen.
  2. Einzeldatei-Verteilung — Selbstständige HTML-Dateien (Berichte, E-Mail-Templates, Offline-Demos) tragen alle Assets ohne externe Abhängigkeiten.
  3. E-Mail-HTML-Kompatibilität — Viele E-Mail-Clients blockieren aus Datenschutzgründen standardmäßig das Laden externer Bilder. Inline-Base64-Bilder umgehen diese Einschränkung.
  4. API-Nutzdaten — Beim Senden eines Bildes als Teil eines JSON-Body (z. B. ein Avatar-Upload-Endpunkt) ermöglicht Base64 die Kodierung der Datei als String-Feld.
  5. CSS-Hintergründe — Kleine Data URIs in Stylesheets vermeiden zusätzliche Anfragen für dekorative Sprites oder Icons.
  6. Content Security Policy (CSP) — Inline-Bilder unterliegen nicht den img-src-Host-Einschränkungen von CSP, was die Konfiguration in eingeschränkten Umgebungen vereinfachen kann.

Wie Base64-Kodierung funktioniert

Der Algorithmus Schritt für Schritt

Base64 verarbeitet Eingaben in 3-Byte-Blöcken (jeweils 24 Bits):

  1. Die nächsten drei Bytes nehmen: B1 B2 B3.
  2. Ihre Bits zu einem 24-Bit-String zusammenfügen.
  3. Die 24 Bits in vier 6-Bit-Gruppen aufteilen.
  4. Jeden 6-Bit-Wert (0–63) mithilfe der Nachschlagetabelle auf sein Base64-Zeichen abbilden.
  5. Wiederholen, bis alle Bytes verarbeitet sind.
  6. Mit =-Zeichen auffüllen, wenn der letzte Block weniger als drei Bytes enthält.

Beispiel

Der ASCII-String Man (Bytes 0x4D 0x61 0x6E) wird so kodiert:

M        a        n
01001101 01100001 01101110   ← 24 Bits
010011  010110  000101  101110
  19      22      5      46
  T       W       F      u

Ergebnis: TWFu — drei Bytes wurden zu vier Zeichen.

Der ~33%-Größenzuwachs erklärt

Vier Base64-Zeichen tragen jeweils 6 Bits Information, insgesamt 24 Bits. Dieselben 24 Bits lagen ursprünglich in drei Bytes (24 Bits) vor. Die Darstellung wächst, weil jedes Ausgabezeichen als vollständiges 8-Bit-ASCII-Byte gespeichert wird, nicht als 6 Bits:

  • Eingabe: 3 Bytes = 24 Bits in 3 × 8 = 24 Bits Speicher.
  • Ausgabe: 4 Zeichen in 4 × 8 = 32 Bits Speicher.
  • Overhead: 32 / 24 = 1,333… → 33,3% größer.

Mit gzip/Brotli-Komprimierung komprimiert Base64-kodierter Text sehr gut (annähernd auf Originalgröße), was den Overhead bei HTTP-Antworten teilweise kompensiert.

Data URIs erklärt

Ein Data URI (auch Data URL genannt) bettet Dateiinhalt direkt in einen URI-String ein, nach dem in RFC 2397 definierten Format:

data:[<mediatype>][;base64],<data>
Teil Beschreibung
data: Schema-Bezeichner
<mediatype> MIME-Typ (z. B. image/png, image/svg+xml)
;base64 Zeigt an, dass Daten Base64-kodiert sind (bei Klartext weglassen)
,<data> Die kodierte (oder unformatierte) Datennutzlast

Beispiele

PNG-Bild in einem <img>-Tag:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Icon">

SVG-Hintergrund in CSS:

.logo {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

SVG ohne Base64 (URL-kodiert):
SVG ist bereits Text und kann ohne Base64 per Prozent-Kodierung eingebettet werden:

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E%3C/svg%3E");
}

URL-Kodierung von SVGs erzeugt für dasselbe Bild eine kleinere Ausgabe als Base64.

Praktische Codebeispiele

Browser: FileReader API

// Bilddatei im Browser in Base64 konvertieren
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
  });
}

// Verwendung
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const base64 = await fileToBase64(e.target.files[0]);
  document.querySelector('img').src = base64;
});

reader.result enthält bereits das vollständige Data-URI-Präfix (z. B. data:image/png;base64,...) und kann direkt src zugewiesen werden.

Browser: Canvas API (Größe ändern + kodieren)

function resizeAndEncode(file, maxWidth = 200) {
  return new Promise((resolve) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    img.onload = () => {
      const scale = Math.min(1, maxWidth / img.width);
      const canvas = document.createElement('canvas');
      canvas.width = img.width * scale;
      canvas.height = img.height * scale;
      canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
      URL.revokeObjectURL(url);
      resolve(canvas.toDataURL('image/webp', 0.85));
    };
    img.src = url;
  });
}

JavaScript: Base64 zurück in Binär dekodieren

// Base64 Data URI zurück in Blob dekodieren
function dataURItoBlob(dataURI) {
  const [header, data] = dataURI.split(',');
  const mime = header.match(/:(.*?);/)[1];
  const binary = atob(data);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  return new Blob([bytes], { type: mime });
}

Python: Kodieren und Dekodieren

import base64

# Bild in Base64 kodieren
with open("image.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("utf-8")
    data_uri = f"data:image/png;base64,{encoded}"

print(data_uri[:80], "...")  # Vorschau

# Base64 zurück in Bild dekodieren
image_data = base64.b64decode(encoded)
with open("output.png", "wb") as f:
    f.write(image_data)

CSS: Kleines Icon einbetten

/* Kleines Icon in CSS einbetten */
.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
  width: 24px;
  height: 24px;
}

/* Alternativ: URL-kodierte SVGs für bessere Lesbarkeit */
.icon-alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E...%3C/svg%3E");
}

Reale Anwendungsfälle

1. E-Mail-Templates

E-Mail-Clients wie Outlook, Gmail (in manchen Kontexten) und Unternehmens-Webmail blockieren das Laden externer Bilder aus Datenschutzgründen standardmäßig. Das Einbetten kleiner Bilder als Base64 Data URIs im HTML-Quellcode gewährleistet, dass sie unabhängig von den Datenschutzeinstellungen des Clients immer angezeigt werden.

2. Progressive Web Apps (PWA) und Offline-First-Apps

Das Inlinen kritischer Bilder in den HTML-Shell oder Service-Worker-gecachte Assets gewährleistet Verfügbarkeit ohne Internetverbindung, ohne zusätzliche Cache-Einträge.

3. Canvas-basierte Bildverarbeitungs-Pipelines

canvas.toDataURL() ist der Standardausgabemechanismus für browserinterne Bildtransformationen — Größenänderung, Wasserzeichen, Formatkonvertierung — vor dem Upload auf einen Server.

4. Datenexport-Funktionen

Herunterladbare Berichte (PDF, ZIP, HTML) generieren, die ihre Bilder ohne externes Hosting tragen müssen. Eine vollständig selbstständige HTML-Rechnung kann per E-Mail versandt oder archiviert werden, ohne sich um tote Bildlinks sorgen zu müssen.

5. CSS-Sprite-Alternative für kleine Icons

Für einmalige kleine Icons kann ein einzelnes Base64-kodiertes SVG als Hintergrundbild einfacher zu warten sein als ein Sprite-Sheet.

Vergleich: Base64 eingebettet vs externe Datei

Faktor Base64 Eingebettet Externe Datei
HTTP-Anfragen 0 (inline) 1 pro Bild
Dateigrößen-Overhead ~33% größer Keiner
Browser-Cache Nicht separat gecacht Per URL gecacht
CDN-Verteilung Nicht anwendbar Volle CDN-Unterstützung
Cache-Invalidierung Elterndokument aktualisieren Dateiname/Hash ändern
Ideal für Kleine Icons < 5 KB Fotos, große Bilder
E-Mail-Kompatibilität Ausgezeichnet Oft blockiert
Offline-Unterstützung Eingebaut Service Worker nötig

Performance-Abwägungen und Überlegungen

Wann Base64 die Performance verbessert

  • Sehr kleine Bilder (< 2–5 KB): Die HTTP-Request-Kosten (DNS-Lookup + TCP-Handshake + TLS-Aushandlung + Request/Response) überwiegen oft die 33%-Größenstrafe für kleine Dateien.
  • HTTP/1.1-Umgebungen: Browser begrenzen gleichzeitige Verbindungen pro Host (typisch 6). Hier ist die Reduzierung der Anfragezahl wichtiger als unter HTTP/2.
  • Kritische Above-the-Fold-Bilder: Das Inlinen eines Hero-Icons oder Logos bedeutet, dass es mit dem ersten HTML-Byte gerendert wird — kein zusätzlicher Round-Trip.

Wann Base64 die Performance verschlechtert

  • Große Bilder (> 5–10 KB): Der Größen-Overhead wird erheblich. Ein 100-KB-PNG wird zu ~133 KB Base64.
  • Wiederverwendete Bilder: Eine externe Bilddatei wird einmal heruntergeladen und seitenübergreifend aus dem Cache wiederverwendet. Ein in jede Seite eingebetteter Base64-String wird bei jedem Seitenaufruf neu heruntergeladen.
  • HTTP/2-Multiplexing: Unter HTTP/2 werden viele kleine Anfragen über eine einzelne Verbindung multiplext — nahezu null Overhead. Das Argument „Anfragen reduzieren" verliert erheblich an Gewicht.
  • Dokument-Parse-Zeit: Ein großer Base64-String trägt zur HTML-Parse-Zeit bei.
  • Browser-Cache: In HTML eingebettete Data URIs werden nur als Teil des Dokuments gecacht und können nicht seitenübergreifend geteilt werden.

Komprimierungshinweis

Base64-kodierter Text komprimiert sich mit gzip/Brotli sehr gut aufgrund seiner hohen Redundanz (eingeschränkter Zeichensatz, wiederholte Muster). Bei aktivierter HTTP-Komprimierung sinkt die effektive Übertragungsgrößenstrafe für typische Bilder auf etwa 2–8%.

Best Practices

  1. Größenschwellenwert festlegen. Bilder unter 2–5 KB einbetten; für alles Größere externe URLs verwenden. Viele Bundler (webpack, Vite) wenden diese Regel automatisch über url-loader / asset/inline an.

  2. SVG gegenüber Rastergrafiken für Icons bevorzugen. SVGs sind bereits Text und komprimieren besser als Raster-Base64. Für SVGs URL-Kodierung (encodeURIComponent) statt Base64 verwenden, um sie lesbar zu halten.

  3. HTTP-Komprimierung aktivieren. Sicherstellen, dass gzip oder Brotli auf dem Server aktiviert sind, damit der 33%-Overhead beim Transport größtenteils kompensiert wird.

  4. WebP oder AVIF verwenden. Moderne Formate erzeugen viel kleinere Dateien vor der Kodierung, was auch die Base64-Ausgabe proportional kleiner macht.

  5. Mit DevTools überprüfen. Den Network-Tab kontrollieren. Wenn eingebettete Bilder das HTML-Dokument deutlich vergrößern, sollte man sie zu externen URLs mit CDN und langen Cache-Headern verschieben.

  6. Für E-Mails: In verschiedenen Clients testen. Nicht alle E-Mail-Clients rendern Data URIs identisch. Vor dem Vertrauen auf Inline-Bilder für kritische E-Mail-Inhalte in Outlook, Gmail (Web und App), Apple Mail und mobilen Clients testen.

  7. Metadaten vor dem Kodieren entfernen. Ein Tool verwenden, das EXIF-Daten entfernt, bevor Bilder eingebettet werden — EXIF kann kilobyteweise unnötige Daten hinzufügen (und potenziell sensible GPS-Koordinaten preisgeben).

  8. Build-Zeit-Werkzeuge nutzen. Statt Bilder manuell zu kodieren, webpacks asset/inline, Vites ?inline-Importsuffix oder PostCSS postcss-inline-base64 für eine zuverlässige Automatisierung verwenden.

SVG vs Rastergrafiken: Eine Anmerkung zur Kodierung

SVG-Bilder sind XML-Text, was bedeutet, dass sie ohne Base64 in CSS eingebettet werden können, indem das Markup einfach URL-kodiert wird. Dieser Ansatz ist bevorzugt, weil:

  • Das Ergebnis für SVG-Inhalt kleiner als Base64 ist.
  • Das SVG innerhalb des Stylesheets für Menschen lesbar bleibt.
  • Kein Dekodierungs-Overhead entsteht.
/* URL-kodiertes SVG — bevorzugt für SVGs */
.checkmark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* Base64-kodiertes SVG — akzeptabel, aber weniger lesbar */
.checkmark-b64 {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

Häufig gestellte Fragen (FAQ)

F1: Welche maximale Größe hat ein Data URI?

Es gibt kein festes Standardlimit, aber Browser setzen praktische Grenzen. Chrome und Firefox verarbeiten Data URIs bis zu ~2 MB problemlos. Internet Explorer beschränkte Data URIs historisch auf 32 KB. Für den Produktionseinsatz sollten eingebettete Bilder unter 5 KB gehalten werden, um die Dokument-Parse-Zeit nicht zu beeinträchtigen.

F2: Kann ich Base64-Bilder in der CSS-Eigenschaft content: verwenden?

Ja. Pseudoelemente akzeptieren Data URIs in content: url(...):

.badge::before {
  content: url("data:image/png;base64,...");
}

Beachten: content: url() rendert das Bild in seiner intrinsischen Größe und kann nicht mit width/height skaliert werden — für Größenkontrolle stattdessen background-image verwenden.

F3: Beeinträchtigt die Base64-Kodierung die Bildqualität?

Nein. Base64 ist eine verlustfreie Kodierung. Sie kodiert und dekodiert die exakten Originalbytes ohne jede Modifikation. Die Bildqualität wird ausschließlich durch die Original-Bilddatei und ihr Format bestimmt (verlustbehaftetes JPEG vs. verlustfreies PNG/WebP).

F4: Wie dekodiere ich einen Base64-String zurück zu einer Datei?

Im Browser:

const byteString = atob(base64String); // dekodieren

In Python:

import base64
data = base64.b64decode(b64_string)

In Node.js:

const buf = Buffer.from(b64String, 'base64');

F5: Werden Base64-kodierte Bilder von Suchmaschinen indexiert?

Suchmaschinen können Bilder, die über Data URIs geliefert werden, indexieren, crawlen sie aber möglicherweise nicht so effizient wie extern gehostete Bilder. Für SEO-kritische Bilder sollten sie extern mit beschreibenden Dateinamen, korrektem Alt-Text und strukturierten Daten-Markup gehostet werden.

F6: Warum endet mein Base64-String mit ==?

Füllzeichen (=) werden hinzugefügt, wenn die Anzahl der Eingabebytes nicht durch 3 teilbar ist. Ein = bedeutet, dass der letzte Block 2 Bytes hatte (16 Bits → 18 Bits kodiert → 1 Füllzeichen). Zwei == bedeuten, dass der letzte Block nur 1 Byte hatte (8 Bits → 12 Bits kodiert → 2 Füllzeichen).

F7: Ist Base64 eine Form der Verschlüsselung?

Nein. Base64 ist ein reines Kodierungsschema, keine Verschlüsselung. Es bietet keine Vertraulichkeit — jeder kann es sofort dekodieren. Base64 nicht verwenden, um sensible Daten zu „verstecken". Für Sicherheit echte Verschlüsselung (AES, RSA usw.) verwenden.

F8: Was ist der Unterschied zwischen Base64 und Base64url?

Base64url ist eine URL-sichere Variante von Base64. Sie verwendet - statt + und _ statt /, und lässt das =-Auffüllen weg. Sie wird häufig in JWTs und anderen Web-Anwendungen verwendet, wo die Zeichen +, / und = in URL-Parametern Probleme verursachen.

Zurück zum Blog Bild zu Base64 →