Bild-zu-Base64-Konverter – Daten-URI-frei

Drag & drop an image here, or

Choose file

Share X / Twitter Facebook LinkedIn WhatsApp

So verwenden Sie Bild zu Base64

Laden Sie das Bild hoch – am besten kleine Dateien inline.
Kopieren Sie den Daten-URI – den vollständigen data:image/…;base64,…-String.
Einbetten: src="data:…" in HTML, url(data:…) in CSS oder als JSON-Stringwert.
Beachten Sie die Größenregel – Symbole ja, Fotos nein; mehr als etwa 20 KB, hosten Sie stattdessen die Datei.

Was ist Bild zu Base64?

Ein Bild-zu-Base64-Konverter kodiert eine Bilddatei als Text – den Daten-URI (data:image/png;base64,iVBORw0…), der das Bild direkt in HTML, CSS, JSON oder JavaScript einbettet, anstatt auf eine separate Datei zu verweisen. Das Bild wird Teil des Codes.

Der Tausch besteht zwischen Anfragen und Bytes: Ein eingebundenes Bild speichert eine HTTP-Anfrage (einmal sinnvoll, weniger unter HTTP/2+), kostet aber etwa 33 % Größenaufwand (Kodierungssteuer von Base64) und verliert unabhängiges Caching. Der Sweet Spot ist klein: Symbole, kleine Logos und Platzhalterbilder unter ein paar KB inline gut; Fotos nicht.

Über den Bild zu Base64

Laden Sie das Bild hoch und kopieren Sie seinen Base64-Daten-URI.

Wo Inlining seinen Platz verdient: kleine Symbole und Dekorationen in CSS (ein Stylesheet, keine zusätzlichen Anforderungen – die klassische Verwendung), eigenständiges Einzeldatei-HTML (E-Mail-Vorlagen, in denen verknüpfte Bilder blockiert werden, Offline-Dokumente, Code-Demos in Sandboxes), Bilder innerhalb von JSON-Nutzlasten (APIs und Konfigurationen, die ein Bild im Text enthalten müssen) und schnelles Prototyping ohne Asset-Hosting. Der E-Mail-Fall ist im Vordergrund: Eingebettete Bilder werden ohne die Schaltfläche „Bilder laden?“ angezeigt. Gate – obwohl die Größendisziplin dort doppelt wichtig ist.

Die Beurteilungsregel: unter ~5 KB, frei inline; 5–20 KB, bedenken Sie; Darüber hinaus hosten Sie die Datei – der Overhead von 33 % plus verlorener Caching übersteigt die gespeicherte Anfrage. Und beachten Sie, dass Daten-URIs die enthaltende Datei sichtbar aufblähen: Ein Stylesheet mit zehn eingebundenen Symbolen trägt sie in seiner Größe. Dateien werden konvertiert und zurückgegeben, nicht gespeichert.

Häufig gestellte Fragen

Codierungsaufwand – Base64 stellt 3 Bytes als 4 Zeichen dar, ein fester +33 %. Es ist die Steuer für die Existenz als Text; gzip auf der enthaltenden Datei greift etwas zurück.

Klein und wenige: Symbole in CSS, Logos in eigenständigem HTML/E-Mails, Bilder in JSON. Die gespeicherte Anfrage übersteigt den Byte-Overhead nur unter etwa 5–20 KB pro Bild.

In vielen Clients ja (und sie umgehen die Bildblockierung), aber die Unterstützung ist lückenhaft – Outlook scheut sich notorisch. Bei der E-Mail-Konvention bleiben gehostete Bilder mit Alternativtext erhalten; Inline für kontrollierte Kontexte.

Nur als Teil der enthaltenden Datei – das Bild kann nicht unabhängig zwischengespeichert, verzögert geladen oder per CDN übertragen werden. Bei dieser Kopplung handelt es sich um die versteckten Kosten, die das Inlining größerer Datenmengen ausschließen.

Hintergrundbild: url("data:image/png;base64,…") – in Anführungszeichen gesetzt, inline in der Eigenschaft. SVG-Symbole sind besonders gut inline (als roher SVG-Text oft kleiner als Base64, einen Vergleich wert).

Learn more

So konvertieren Sie ein Bild in einen Base64-Daten-URI

Durch das direkte Einbetten kleiner Bilder in den Code können HTTP-Anfragen eingespart werden. Hier erfahren Sie, wie die Base64-Bildkonvertierung funktioniert – und wann Sie sie verwenden.

Read the guide