Bild-zu-Base64 Konverter: Kodiere jedes Bild

Jedes Bild in Base64 konvertieren

Die Base64-Kodierung wandelt binäre Bilddaten in einen Textstring um, der direkt in HTML, CSS, JavaScript, JSON oder jedes textbasierte Format eingebettet werden kann. Ziehe ein Bild oben hinein, wähle dein Ausgabeformat (reines Base64, Data URI oder CSS Background) und kopiere das Ergebnis.

Wie die Bild-zu-Base64 Konvertierung funktioniert

Wenn ein Browser eine Bilddatei liest, verarbeitet er einen Bytestrom: JPEG-Kompressionsblöcke, PNG-Chunks, SVG-XML-Knoten. Diese Bytes enthalten Werte außerhalb des druckbaren ASCII-Bereichs, was sie unsicher für die Einbettung in Textdokumente macht.

Die Base64-Kodierung löst dies, indem sie alle 3 Bytes Binärdaten auf 4 Zeichen eines 64-Zeichen-Alphabets (A-Z, a-z, 0-9, +, /) abbildet. Das Ergebnis ist ein reiner ASCII-String, den jedes textbasierte Protokoll ohne Datenverlust transportieren kann.

Der FileReader-Ansatz

Dieses Tool verwendet die FileReader-API des Browsers:

const reader = new FileReader();
reader.onload = () => {
  const dataUri = reader.result;
  // dataUri = "data:image/png;base64,iVBORw0KGgo..."
};
reader.readAsDataURL(file);

Ausgabeformat-Optionen

Reines Base64

Der rohe kodierte String ohne Präfix. Verwende dies, wenn du das Bild in einer Datenbank speichern, in einem API-Payload senden oder an eine Funktion übergeben musst, die reine Base64-Eingabe erwartet.

Data URI

Ein vollständiger Data URI mit MIME-Typ. Verwende ihn in HTML <img>-Tags, CSS url()-Funktionen oder überall dort, wo eine URL erwartet wird:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSU..." alt="Inline-Bild" />

CSS Background

Eine fertige CSS-Deklaration zum Einfügen:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...);

Wann einbetten vs. separat bereitstellen

Inline (Base64 Data URI)

Am besten für Bilder unter 10 KB. Eliminiert eine HTTP-Anfrage, was die Ladezeit bei vielen kleinen Bildern (Symbole, Emoticons) verkürzt. Nachteile: 33% größer, kein unabhängiges Caching, blockiert das Rendering.

Separater Datei-Link

Am besten für Bilder über 10 KB, Fotos, große SVGs. Ermöglicht Browsercaching, paralleles Laden und CDN-Bereitstellung. Nachteile: zusätzliche HTTP-Anfrage, DNS- und TCP-Overhead.