Bild zu Base64 Codierung Vollständige Anleitung

Bilder direkt in HTML, CSS und JSON mit Base64-Codierung einbetten — keine externen Dateien, keine HTTP-Anfragen.

~33% Größenoverhead Keine HTTP-Anfragen Funktioniert in allen Browsern

Base64-Codierung konvertiert binäre Bilddaten in eine Textzeichenkette aus 64 druckbaren ASCII-Zeichen. Dies ermöglicht, Bilder direkt einzubetten in HTML, CSS und JSON ohne externe Dateireferenzen.

Die Technik wird für kleine Icons, E-Mail-Vorlagen und Offline-Apps verwendet. Zu verstehen, wann Base64 hilft und wann es schadet, ist für moderne Webentwicklung wichtig.

Was ist Base64-Bildkodierung

Base64 ist ein Binär-zu-Text-Codierungsschema mit 64 Zeichen: A–Z, a–z, 0–9, + und /. Jede Gruppe von 3 Bytes Binärdaten wird auf 4 Base64-Zeichen abgebildet. In Base64 codierte Bilder können als Data-URIs in HTML oder CSS-Hintergrundbilder eingefügt werden.

Kostenloses Tool Bild zu Base64 Encoder Konvertiere jedes Bild sofort in eine Base64-Daten-URI

Wie Base64-Kodierung funktioniert

Der Encoder liest das Bild als Rohbytes, teilt sie in 6-Bit-Gruppen und mappt jede auf eines von 64 Zeichen. Die Ausgabe endet mit = oder == als Padding. Eine 1KB-PNG-Datei wird zu ungefähr 1,37KB Base64-Text. Der Browser dekodiert die Zeichenkette vor dem Rendern.

Base64 in HTML und CSS

Ein Base64-codiertes Bild kann überall verwendet werden, wo eine URL erwartet wird. In HTML als img-src, in CSS als background-image. Das Data-URI-Format ist:

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." />

/* CSS */
.icon &#123;
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
&#125;
Kostenloses Tool Base64 Encoder / Decoder Kodiere und dekodiere Base64-Strings für Text und Daten

Größenoverhead und Performance

Base64 fügt ungefähr 33% Overhead hinzu. Eine 10KB-PNG wird ~13,3KB Base64. Das Einbetten eliminiert jedoch die HTTP-Anfrage — für kleine Dateien (< 5KB) ist dieser Kompromiss günstig. Bei größeren Bildern überwiegt der Overhead. Base64-Zeichenketten sind nicht separat cachebar.

Wann Base64-Bilder verwenden

Base64 verwenden für: kleine Icons und Favicons (< 5KB) in CSS; E-Mail-Vorlagen, wo externe Bilder blockiert werden können; Offline-PWAs; SVG-Dateien mit eingebetteten Bitmap-Texturen; JSON-Payloads. Vermeiden für: Bilder > 10KB, häufig ändernde Bilder, Bilder, die vom CDN-Caching profitieren.

Einschränkungen und Alternativen

Einschränkungen: kein separates Browser-Caching, 33% Größenzunahme, lange Zeichenketten im Quellcode. Alternativen: CSS-Sprites, HTTP/2-Multiplexing, Inline-SVGs. Für E-Mails gehostete Bilder auf CDN verwenden, wenn Base64-Zeichenketten zu lang sind.

Kostenloses Tool Favicon-Generator Generiere Favicons in allen benötigten Größen aus jedem Bild

FAQ

Was ist Base64-Bildkodierung? +
Base64 konvertiert binäre Bilddaten in eine druckbare Textzeichenkette mit 64 ASCII-Zeichen, die direkt in HTML, CSS oder JSON eingebettet werden kann.
Wie viel größer ist ein Base64-Bild? +
Base64 fügt etwa 33% Overhead hinzu. Eine 10KB-PNG wird ~13,3KB Base64-Text.
Wie verwende ich ein Base64-Bild in HTML? +
Als Data-URI im src-Attribut: . Dasselbe Format funktioniert in CSS als background-image.
Funktioniert Base64 mit allen Bildformaten? +
Ja. Der MIME-Typ im Data-URI gibt das Format an: image/png, image/jpeg, image/gif, image/webp, image/svg+xml.
Sollte ich Base64 für große Bilder verwenden? +
Nein. Für Bilder > 5–10KB überwiegt der 33% Overhead die HTTP-Anfrageeinsparungen. Nur für kleine Icons und Platzhalter verwenden.
Werden Base64-Bilder von Browsern gecacht? +
Nicht separat. Die Base64-Zeichenkette ist Teil der HTML- oder CSS-Datei und wird als Teil dieser gecacht.
Kann ich Base64-Bilder in E-Mails verwenden? +
Ja. Einige E-Mail-Clients blockieren externe Bilder, rendern aber immer Inline-Base64-Bilder. Allerdings erhöhen sie die E-Mail-Größe erheblich.