🔐
← 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.

So konvertieren Sie Bilder in Base64-Data-URLs - CoolTool