Entwickler-Leitfaden
Base64-Bild in HTML, CSS und JavaScript
Praktische Beispiele zum Einbetten von Base64-Bilddaten in Front-End-Code, mit Hinweisen zu Performance und Dateigröße.
4.8 / 5 124 Bewertungen
Was ist eine Base64-Bild-Data URI?
Eine Data URI kombiniert MIME-Typ und Base64-Inhalt in einem String. Ein übliches Format sieht wie data:image/png;base64,iVBORw0KGgo... aus.
Sie verwenden einen data image base64-Wert, wenn Sie ein Bild ohne separate Datei-URL referenzieren möchten. Der Browser liest den Text und rendert das Bild direkt.
Hinweis: Suchen nach html to base64 bezieht sich meist auf die Kodierung einer HTML-Datei selbst. Dieser Leitfaden konzentriert sich darauf, Base64-Bilddaten in HTML, CSS und JavaScript einzubetten.
Base64-Bild in einem HTML-img-Tag
Verwenden Sie eine Data URI im src-Attribut, wenn Sie ein eigenständiges HTML-Snippet mit einem base64 img tag-Muster benötigen.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="1x1 pixel" />Ersetzen Sie den Beispielwert durch die Ausgabe aus dem Bild-zu-Base64-Konverter.
Base64-Hintergrundbild in CSS
Verwenden Sie kodierte Bilder für kleine Icons, Platzhalter und dekorative Hintergründe mit einem background image base64-Muster.
.icon { width: 24px; height: 24px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="); background-size: cover; }Halten Sie CSS-Data-URIs klein, damit Ihr Stylesheet schnell geparst und heruntergeladen werden kann.
Bild mit JavaScript in Base64 konvertieren
Generieren Sie Base64 im Browser, wenn Sie convert image to base64 javascript-Workflows für Uploads, Vorschauen oder API-Aufrufe benötigen.
function fileToDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); }Das Ergebnis enthält das Data-URI-Präfix und den kodierten Inhalt. Dies ist ein üblicher image to base64 javascript-Ansatz.
const dataUrl = canvas.toDataURL('image/png'); const base64 = dataUrl.split(',')[1];Verwenden Sie Canvas-Ausgabe, wenn Sie das Bild bereits auf einem Canvas-Element gezeichnet haben.
Base64-Bildbeispiele
PNG- und GIF-Base64-Strings sind üblich für kleine UI-Assets wie Icons, Platzhalter und Lade-Punkte.
JPEG-Base64 beginnt oft mit /9j/, wenn Sie nur die kodierten Zeichen ohne Präfix ansehen.
Wenn Dokumentation einen image to base64 string erwähnt, meint sie meist entweder die rohen kodierten Zeichen oder die vollständige Data URI. Beide Formate kommen in echten Projekten vor.
Nutzen Sie unsere Konverter-Seiten, um ein base64 image example oder image base64 example aus Ihren eigenen Dateien zu erstellen, statt Platzhaltertext zu verwenden.
Verwandte Konverter
Vor- und Nachteile von Base64-Bildern
Vorteile
Sie reduzieren separate Dateianfragen für kleine Assets, transportieren Bilder leicht durch JSON und kopieren einen String an mehrere Stellen.
Nachteile
Base64 image encode-Ausgabe ist größer als die Quelldatei, schwerer als eigenständiges Asset zu cachen und ungeeignet für große Fotos.
Häufig gestellte Fragen
Fügen Sie die vollständige Data URI in das src-Attribut eines img-Tags ein. Sie können ein fertiges Snippet aus dem Bild-zu-Base64-Konverter kopieren.
Verwenden Sie Base64 in CSS für sehr kleine Assets wie Icons. Vermeiden Sie große background image base64-Werte, weil sie die Stylesheet-Größe erhöhen.
Base64 kann bei winzigen Dateien helfen, verschlechtert aber meist die Performance bei großen Bildern, weil der kodierte String größer ist und schwerer separat gecacht werden kann.
Verwenden Sie FileReader mit readAsDataURL für Uploads oder canvas.toDataURL, wenn das Bild bereits auf einem Canvas gezeichnet ist. Beide Methoden liefern einen String, den Sie teilen oder direkt einfügen können.