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.