Wie man ein Bild in Base64 konvertiert

Das Konvertieren von Bildern in Base64 ist nützlich, um Bilder direkt in HTML, CSS oder JSON-Payloads einzubetten. Dies vermeidet zusätzliche HTTP-Anfragen und macht Ihre Inhalte eigenständig. Anstatt mit einem <img>-Tag, dessen src-Attribut auf eine URL verweist, auf eine externe Bilddatei zu verlinken, können Sie die Bilddaten direkt in HTML mithilfe eines Daten-URIs einbetten. Dies macht eine separate Netzwerkanfrage des Browsers für das Bild überflüssig, reduziert die Latenz und stellt sicher, dass das Bild auch dann verfügbar ist, wenn externe Ressourcen blockiert sind.

Das Konzept der Base64-Kodierung für Bilder beruht auf der Notwendigkeit, binäre Daten über Medien zu übertragen, die für Text ausgelegt sind. E-Mail, JSON, XML und viele Webprotokolle wurden ursprünglich für Textinhalte entwickelt. Wenn Sie binäre Daten wie Bilder in diesen Kontexten einbetten müssen, konvertiert die Base64-Kodierung die binären Bilddaten in eine sichere ASCII-Darstellung, die inline ohne spezielle Behandlung eingefügt werden kann. Der Nachteil ist eine etwa 33-prozentige Größensteigerung im Vergleich zur ursprünglichen Binärdatei, aber für kleine Bilder wie Symbole, Logos und Thumbnails ist dieser Overhead oft akzeptabel.

Daten-URIs verstehen

Ein Daten-URI ist ein URL-Schema, das es Ihnen ermöglicht, Daten inline in eine Webseite einzufügen. Das Format für einen Bild-Daten-URI ist:

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

Die Komponenten eines Daten-URI setzen sich wie folgt zusammen. Das data:-Präfix teilt dem Browser mit, dass der Inhalt inline ist und nicht von einer externen URL abgerufen wird. Der image/png-Teil ist der MIME-Typ, der das Bildformat angibt. Das Schlüsselwort base64 gibt das verwendete Kodierungsschema an. Alles nach dem Komma sind die Base64-kodierten Bilddaten.

Browser unterstützen Daten-URIs in <img>-Tags, CSS-background-image-Eigenschaften und sogar in <link rel="icon">-Tags für Favicons. Der Browser dekodiert die Base64-Daten zurück in Binärform und rendert das Bild genau so, als ob es von einer URL abgerufen worden wäre.

Bildformatvergleich für Base64

Die Wahl des richtigen Bildformats vor der Konvertierung in Base64 beeinflusst sowohl die Dateigröße als auch die Qualität des resultierenden Daten-URI.

Die Base64-Größensteigerung ist über Formate hinweg konsistent, da Base64 alle 3 Bytes Eingabe in 4 Bytes Ausgabe kodiert, wobei bei Bedarf Auffüllung hinzugefügt wird. Dies bedeutet, dass eine 10 KB große PNG-Datei nach der Base64-Kodierung ungefähr 13,6 KB groß wird, unabhängig vom Bildformat.

Allerdings beeinflusst die Wahl des Bildformats die Anfangsgröße erheblich. WebP erzeugt typischerweise 25 bis 35 Prozent kleinere Dateien als PNG bei gleicher visueller Qualität. Wenn Sie ein PNG vor der Base64-Kodierung in WebP konvertieren, wird der endgültige Daten-URI erheblich kleiner sein als der PNG-basierte Daten-URI. Aus diesem Grund lohnt es sich immer, das Bildformat vor der Konvertierung in Base64 zu optimieren.

SVG ist ein Sonderfall, da es bereits textbasiert (XML) ist. Anstatt eine PNG-Version Ihres SVG Base64 zu kodieren, können Sie das SVG-Markup direkt in Ihr HTML einfügen. Dies ist effizienter, zugänglicher und flexibler als die Konvertierung in Base64. Kodieren Sie SVG nur dann Base64, wenn Sie es in einem Kontext einbetten müssen, der ein Binärformat erfordert, wie z. B. in einer CSS-background-image-Eigenschaft, bei der Sie separate HTTP-Anfragen vermeiden möchten.

Wann Base64-Bilder verwendet werden sollten

Das Einbetten von Bildern als Base64-Daten-URIs ist nicht immer die richtige Wahl. Das Verständnis, wann es vorteilhaft ist, hilft Ihnen, fundierte Leistungsentscheidungen zu treffen.

Empfohlene Anwendungsfälle

• Kleine Symbole und UI-Elemente. Symbole, die einige hundert Bytes bis einige Kilobyte groß sind, sind hervorragende Kandidaten für die Base64-Einbettung. Der Overhead einer separaten HTTP-Anfrage für jedes Symbol überwiegt bei weitem die Base64-Größensteigerung. Eine typische Website hat 20 bis 50 kleine Symbole; das Einbetten als Daten-URIs eliminiert Dutzende von HTTP-Anfragen.

• CSS-Sprite-Ersatz. Anstatt CSS-Sprites zu verwenden (viele kleine Bilder zu einem einzigen großen Bild kombinieren und background-position verwenden, um den richtigen Teil anzuzeigen), können Sie jedes Symbol als Base64-Daten-URI einbetten. Dies vereinfacht Ihr CSS und macht die Wartung eines Sprite-Atlasses überflüssig.

• E-Mail-Signaturen. E-Mail-Clients blockieren externe Bilder standardmäßig oft. Das Einbetten von Bildern als Daten-URIs stellt sicher, dass Ihr Logo oder Signaturbild immer sichtbar ist, selbst wenn der E-Mail-Client des Empfängers externe Inhalte blockiert.

• Eigenständige Dokumente. Wenn Sie ein HTML-Dokument als einzelne Datei zur Verteilung erstellen, wie z. B. einen Bericht, eine Präsentation oder einen Prototypen, macht das Einbetten aller Bilder als Daten-URIs die Datei vollständig eigenständig. Der Empfänger muss keine externen Assets herunterladen.

Wann Base64-Bilder vermieden werden sollten

• Große Fotos. Eine 500 KB große JPEG-Datei wird nach Base64-Kodierung zu 700 KB. Der 200 KB Overhead ist erheblich, und der Browser muss die Base64-Zeichenkette dekodieren, bevor er rendert, was Latenz hinzufügt. Verwenden Sie für große Bilder standardmäßige <img>-Tags mit HTTP-Caching.

• Bilder, die auf derselben Seite mehrfach verwendet werden. Wenn dasselbe Bild mehrfach vorkommt (z. B. ein Logo in Kopf- und Fußzeile), wird ein Daten-URI jedes Mal eingebettet, wodurch die Bytes dupliziert werden. Eine gecachte externe Bilddatei wird einmal abgerufen und wiederverwendet.

• Bilder, die auf mehreren Seiten gemeinsam genutzt werden. Daten-URIs sind pro Dokument. Wenn dasselbe Bild auf jeder Seite Ihrer Website erscheint, wird es in das HTML jeder Seite erneut eingebettet, was Bandbreite verschwendet. Verwenden Sie stattdessen externe URLs mit Cache-Headern.

Schritt-für-Schritt-Online-Methode

Das Konvertieren eines Bildes in Base64 online ist die schnellste Methode, wenn Sie eine einmalige Konvertierung benötigen.

1. Bereiten Sie Ihre Bilddatei vor. Optimieren Sie das Bild für beste Ergebnisse. Passen Sie die Größe auf die Abmessungen an, die Sie verwenden werden, komprimieren Sie es und wählen Sie das geeignete Format (PNG für Grafiken, JPEG für Fotos, WebP für moderne Browser).

2. Öffnen Sie ein Base64-Kodierungstool. Verwenden Sie das Base64 Encoder Decoder-Tool. Es akzeptiert Bild-Uploads über eine Dateiauswahl oder Drag-and-Drop.

3. Laden Sie Ihr Bild hoch oder ziehen Sie es auf das Tool. Das Tool liest die Datei und konvertiert sie sofort in Base64.

4. Kopieren Sie den resultierenden Daten-URI. Die Ausgabe enthält das data:image/[format];base64,-Präfix, sodass Sie es direkt in Ihr HTML oder CSS einfügen können.

5. Verwenden Sie den Daten-URI in Ihrem Code:

   • HTML: <img src="data:image/png;base64,..." alt="Beschreibung">
   • CSS: background-image: url('data:image/png;base64,...');

JavaScript (Browser)

Das Konvertieren von Bildern in Base64 im Browser ist nützlich für die clientseitige Bildverarbeitung, z. B. vor dem Hochladen auf einen Server oder bei der Entwicklung einer Webanwendung, die Bilddaten lokal verarbeitet.

function toBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
  });
}

// Verwendung
document.getElementById('file-input').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const base64 = await toBase64(file);
  console.log(base64);
});

Die Methode FileReader.readAsDataURL() liest die gesamte Datei in den Speicher und erzeugt einen Daten-URI. Diese Methode ist asynchron, sodass sie den Hauptthread nicht blockiert. Bei sehr großen Dateien (über 100 MB) sollten Sie die Datei in Teilen streamen, um Speicherprobleme zu vermeiden.

Node.js

In einer Node.js-Serverumgebung können Sie Bilder in Base64 konvertieren, bevor Sie sie in einer Datenbank speichern, in einer API-Antwort senden oder in ein generiertes HTML-Dokument einbetten.

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

const imagePath = path.join(__dirname, 'image.png');
const image = fs.readFileSync(imagePath);
const base64 = image.toString('base64');
const dataUri = `data:image/png;base64,${base64}`;

Verwenden Sie für große Dateien die asynchrone fs.readFile(), um eine Blockierung der Ereignisschleife zu vermeiden. Der Aufruf image.toString('base64') konvertiert den Buffer in eine Base64-Zeichenkette. Sie können den korrekten MIME-Typ durch Überprüfen der Dateierweiterung oder mithilfe einer Bibliothek wie mime-types bestimmen.

Python

Das base64-Modul von Python macht die Bild-zu-Base64-Konvertierung unkompliziert. Dieser Ansatz wird häufig in Web-Frameworks wie Django und Flask zur Generierung von Daten-URIs in Vorlagen verwendet.

import base64

with open('image.png', 'rb') as f:
    base64_str = base64.b64encode(f.read()).decode('utf-8')
    data_uri = f'data:image/png;base64,{base64_str}'

Der Modus 'rb' öffnet die Datei im Binärmodus, der zum Lesen von Bilddaten erforderlich ist. Die Funktion base64.b64encode() gibt Bytes zurück, daher rufen wir .decode('utf-8') auf, um sie für die Aufnahme in den Daten-URI in eine Zeichenkette zu konvertieren.

Python mit MIME-Typ-Erkennung

import base64
import mimetypes

def image_to_data_uri(image_path):
    mime_type, _ = mimetypes.guess_type(image_path)
    if not mime_type:
        raise ValueError(f'Konnte MIME-Typ für {image_path} nicht bestimmen')
    with open(image_path, 'rb') as f:
        base64_str = base64.b64encode(f.read()).decode('utf-8')
    return f'data:{mime_type};base64,{base64_str}'

Diese erweiterte Version erkennt automatisch den MIME-Typ basierend auf der Dateierweiterung, was sie für die Handhabung mehrerer Bildformate ohne manuelle Typangabe geeignet macht.

PHP

PHP wird häufig in serverseitigen Webanwendungen verwendet und bietet integrierte Base64-Kodierungsfunktionen.

$image = file_get_contents('image.png');
$base64 = base64_encode($image);
$dataUri = 'data:image/png;base64,' . $base64;

Bei großen Dateien kann das Speicherlimit von PHP durch file_get_contents() überschritten werden. Verwenden Sie fopen() mit Streaming für Dateien, die größer als einige Megabyte sind. Sie können auch die finfo-Erweiterung verwenden, um den MIME-Typ automatisch zu erkennen:

$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mimeType = finfo_file($finfo, 'image.png');
finfo_close($finfo);

$image = file_get_contents('image.png');
$base64 = base64_encode($image);
$dataUri = 'data:' . $mimeType . ';base64,' . $base64;

Leistungsaspekte

Bei der Verwendung von Base64-Bildern sollten Sie die folgenden Leistungskompromisse berücksichtigen.

Erhöhte HTML-Größe. Ein Base64-kodiertes Bild erhöht die HTML-Dateigröße, was das anfängliche Seitenrendering verzögert. Bei kleinen Bildern wird dies durch die Eliminierung von HTTP-Anfragen aufgewogen. Bei großen Bildern ist die Verzögerung inakzeptabel.

CPU-Overhead. Der Browser muss Base64 vor dem Rendern zurück in Binärform dekodieren. Diese Dekodierung benötigt CPU-Zeit, obwohl moderne Browser Base64 mit Hunderten von Megabyte pro Sekunde dekodieren, was diesen Overhead bei kleinen Bildern vernachlässigbar macht.

Keine Caching-Granularität. Daten-URIs werden als Teil der HTML- oder CSS-Datei zwischengespeichert. Wenn Sie ein einzelnes Bild aktualisieren, wird der Cache der gesamten enthaltenden Datei ungültig. Bei externen Bildern muss nur die geänderte Bilddatei erneut abgerufen werden.

Gzip-Kompression. Base64-kodierte Daten komprimieren mit gzip im Vergleich zu rohen Binärdaten schlecht, da Base64 ein begrenztes Alphabet verwendet, das mehr Entropie im Bytestrom erzeugt. Allerdings ist die gesamte gzip-komprimierte Größe einer Seite mit Base64-Bildern oft immer noch geringer als der Netzwerk-Overhead separater HTTP-Anfragen für jedes Bild.