🔐
← Zurück zu Anleitungen

So konvertieren Sie Bilder in Base64-Data-URLs

· Tags: image-to-base64, base64, data-url, image-embedding, web-performance, html, css

Was ist eine Base64-Bild-Data-URL?

Eine Base64-Bild-Data-URL bettet die gesamte Bilddatei direkt als Text-String in ein Webdokument ein und macht damit eine separate HTTP-Anfrage zum Laden des Bildes überflüssig. Statt dass der Browser eine externe Datei abruft, sind die Bilddaten bereits im HTML oder CSS vorhanden.

Das Format sieht so aus:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

Aufgeschlüsselt:

  • data: — das Präfix des Data-URI-Schemas
  • image/png — der MIME-Typ des eingebetteten Bildes
  • ;base64 — kennzeichnet die Base64-Kodierung
  • ,iVBORw0... — die eigentlichen Base64-kodierten Bilddaten

Warum Bilder in Base64 konvertieren?

Das Einbetten von Bildern als Base64 ist in mehreren Szenarien nützlich:

HTTP-Anfragen reduzieren

Jede externe Bilddatei erfordert eine separate HTTP-Anfrage. Base64-Data-URLs machen diese Anfragen überflüssig, was die Ladezeit der Seite verbessern kann — besonders bei Verbindungen mit hoher Latenz oder bei Seiten mit vielen kleinen Assets.

Eigenständige Dokumente

Base64-Bilder machen Ihre HTML-Dateien vollständig portabel. Eine E-Mail-Vorlage mit Base64-Bildern funktioniert auch dann, wenn der E-Mail-Client des Empfängers externe Ressourcen blockiert. Ebenso kann ein HTML-Dokument mit eingebetteten Bildern als einzelne Datei geteilt werden, ohne sich um kaputte Bildpfade sorgen zu müssen.

Leistungskritische Seiten

Für Hero-Bilder im sichtbaren Bereich und kritische UI-Elemente kann die Vermeidung des zusätzlichen Roundtrips Metriken wie das Largest Contentful Paint (LCP) verbessern. Dies kommt jedoch nur kleinen Bildern zugute — bei großen Bildern ist das Inline-Einbetten kontraproduktiv.

Funktioniert offline

Wenn ein Bild als Data-URL eingebettet ist, funktioniert es ohne Netzwerkzugriff. Dies ist wertvoll für Offline-Webanwendungen und progressive Web-Apps (PWAs).

So konvertieren Sie ein Bild in Base64

Methode 1: Verwendung eines Online-Tools (am einfachsten)

Der schnellste Weg, ein Bild in Base64 zu konvertieren, ist die Verwendung eines speziellen Online-Tools. Laden Sie Ihr Bild in unseren kostenlosen Online-Base64-Encoder hoch oder ziehen Sie es hinein, und Sie erhalten die vollständige Data-URL, bereit zum Einfügen in Ihren Code.

Methode 2: Verwenden von JavaScript im Browser

Die FileReader-API bietet einen unkomplizierten Weg, um vom Benutzer ausgewählte Bilder in Base64 zu konvertieren:

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage with a file input
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

Methode 3: Verwenden der Canvas-API

Wenn Sie ein Bild vor der Konvertierung in Base64 skalieren, zuschneiden oder komprimieren müssen, ist die Canvas-API der richtige Weg:

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Example: Resize an image before converting
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

Methode 4: Verwenden von Node.js

Auf der Serverseite verwenden Sie das fs-Modul mit Buffer, um Bilddateien in Base64 zu konvertieren:

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Detect MIME type from extension
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

Methode 5: Verwenden der Befehlszeile

Unter Linux und macOS können Sie den eingebauten Befehl base64 verwenden:

# Encode to Base64 and wrap as a data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

So verwenden Sie Base64-Bilder in HTML

Direkt in einem <img>-Tag:

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

So verwenden Sie Base64-Bilder in CSS

Als Hintergrundbild:

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

Leistungsüberlegungen und Best Practices

Wann Base64-Bilder helfen

  • Kleine Icons und UI-Elemente unter 10 KB
  • Kritische Bilder im sichtbaren Bereich, die das Rendern blockieren
  • Sprites und SVG-Icons, die auf einer Seite verwendet werden
  • E-Mail-Vorlagen, bei denen externe Bilder oft blockiert werden
  • Offline-first-Web-Apps und eigenständige Dokumente

Wann Base64-Bilder schaden

  • Große Fotos oder hochauflösende Bilder (100 KB+) — der Base64-Overhead und die Parse-Verzögerung schaden der Leistung
  • Bilder, die sich häufig ändern — das Ungültigmachen des Browser-Caches für ein großes HTML-Payload ist verschwenderisch
  • Bilder, die über viele Seiten geteilt werden — externe Dateien profitieren vom gemeinsamen Browser-Cache
  • Über CDNs ausgelieferte Bilder — CDNs optimieren die Dateiauslieferung besser als inline eingebettete Daten

Die 10-KB-Faustregel

Eine weit verbreitete Richtlinie: Wenn ein Bild unter 10 KB liegt, sollten Sie es als Base64 inline einbetten. Ist es größer, liefern Sie es als separate Datei aus. Dies balanciert den Overhead von HTTP-Anfragen gegen den Overhead Base64-kodierter Daten in Ihrem HTML.

Der optimale Schwellenwert hängt jedoch von Ihrer spezifischen Situation ab:

  • HTTP/2-Multiplexing reduziert den Preis mehrerer Anfragen und macht externe Dateien attraktiver
  • Bei langsamen Verbindungen kann die Eliminierung von Anfragen selbst bei größeren Bildern wertvoll sein
  • Für ressourcenkritische Rendering-Pfade betten Sie sogar größere Bilder inline ein, wenn es einen Roundtrip weniger bedeutet

Kompressionsüberlegung

Wenn Sie JPEG- oder PNG-Bilder in Base64 konvertieren, sollten Sie stattdessen WebP in Betracht ziehen. WebP bietet bei gleicher Qualitätsstufe eine bessere Komprimierung und führt zu kleineren Base64-Strings. Viele Online-Tools ermöglichen es Ihnen, Bilder vor der Konvertierung in Base64 neu zu kodieren.

Konvertieren Sie Ihre Bilder in Base64

Bereit, Bilder direkt in Ihren Code einzubetten? Verwenden Sie unseren kostenlosen Online-Base64-Encoder und -Decoder, um Bilder hochzuladen und vollständige Data-URLs für HTML, CSS und JavaScript zu erhalten — keine Installation erforderlich.