Bild zu Base64 + SVG-zu-Data-URI-Konverter | We.Inc
Wandle PNG-, JPG-, WebP-, GIF- oder SVG-Bilder in deinem Browser in Base64-Data-URIs um. Kopiere sie als img-Tag, CSS-Hintergrund oder JSON, erhalte für SVG eine kleinere URL-kodierte Version und sieh, ob sich das Einbetten lohnt.
Base64 wandelt die Bytes eines Bildes in Text um, damit es als Data URI direkt in HTML oder CSS stehen kann, zum Beispiel src="data:image/png;base64,...". Der Text ist etwa ein Drittel größer als die Datei. Zieh unten ein Bild hinein, um die Data URI, fertige img- und CSS-Snippets und eine Einschätzung zu bekommen, ob sich das Einbetten lohnt.
Wann Einbetten hilft und wann es schadet
Bild
Einbetten?
Warum
Icon unter 4 kB
Meistens ja
Spart eine Anfrage bei geringen Kosten
SVG-Logo oder -Icon
Ja, URL-kodiert
Kleiner als Base64 und weiterhin lesbar
Bild im sichtbaren Bereich, 4 bis 20 kB
Manchmal
Nur wenn es auf einer einzigen Seite vorkommt
Foto oder alles über 20 kB
Nein
Bläht jeden Ladevorgang auf und kann nicht separat gecacht werden
Zieh ein Bild oder mehrere hinein. Jedes bekommt seine Base64-Data-URI und bei SVG-Dateien zusätzlich eine URL-kodierte Version, die meist kleiner ist. Kopiere jede davon als img-Tag, CSS-Hintergrund oder JSON-Wert. Deine Dateien verlassen nie dein Gerät.
Zieh Bilder in das Feld oder klicke, um sie auszuwählen. PNG, JPG, WebP, GIF, AVIF, ICO und SVG funktionieren alle.
Der Browser liest jede Datei lokal und kodiert sie. Nichts wird hochgeladen.
Vergleiche die Originalgröße mit der kodierten Größe und lies die Einschätzung, ob du das Bild einbetten solltest.
Kopiere das benötigte Format: reine Data URI, img-Tag, CSS-background-image oder JSON.
Erst komprimieren, dann kodieren. Ein Foto mit 300 kB ergibt kodiert etwa 400 kB Text, was schlechter ist als die Ausgangsdatei.
Bei SVG überspringt die URL-kodierte Form Base64 komplett. Sie ist meist kleiner, und du kannst das Markup weiterhin lesen und bearbeiten.
Data URIs in CSS werden mit dem Stylesheet heruntergeladen, und das blockiert das Rendering. Beschränke sie auf kleine Icons, die jede Seite braucht.
Denk an den Alt-Text. Ein eingebettetes Bild braucht trotzdem eine Beschreibung für Screenreader, oder alt="", wenn es dekorativ ist.
Häufige Fragen
Warum ist die Base64-Version größer als mein Bild?
Base64 nutzt vier Textzeichen für je drei Bytes, die Ausgabe ist also etwa 33% größer, plus ein paar Bytes Padding und das Präfix data:. Gzip- oder Brotli-Komprimierung auf der Seite holt einen Teil davon zurück, aber selten alles.
Soll ich Base64 für SVG verwenden?
Meistens nicht. SVG ist bereits Text und kann daher mit nur wenigen maskierten Zeichen in eine Data URI. Diese Version ist typischerweise kleiner als Base64 und bleibt lesbar. Nutze Base64 nur, wenn ein Tool, in das du einfügst, die URL-kodierte Form ablehnt.
Funktionieren Data URIs in E-Mails?
Die Unterstützung ist lückenhaft. Mehrere große E-Mail-Clients blockieren oder entfernen Bilder als Data URI. Hoste das Bild für Newsletter also und verlinke es, oder hänge es mit einer Content-ID an.
Gibt es eine Größenbeschränkung für Data URIs?
Aktuelle Browser akzeptieren sehr lange Data URIs in img-Tags und CSS, weit über jedes sinnvolle Bild hinaus. Die praktische Grenze ist die Performance: Große eingebettete Bilder verlangsamen die Datei, die sie enthält. Manche älteren Tools und E-Mail-Clients schneiden sie allerdings ab.
Wie eine Data URI aufgebaut ist
Eine Data URI besteht aus drei Teilen: dem Schema data:, dem Medientyp wie image/png und dem Inhalt. Bei binären Bildern ist der Inhalt Base64, und auf den Typ folgt ;base64. Bei Textformaten wie SVG kann der Inhalt das Markup selbst sein, mit einer Handvoll prozentkodierter Zeichen.
Browser behandeln eine Data URI wie jede andere Bildquelle. Sie wird im Speicher dekodiert, es gibt also keine zusätzliche Anfrage, aber auch keinen eigenen Cache-Eintrag: Das Bild wird jedes Mal neu heruntergeladen, wenn die Seite oder das Stylesheet, das es enthält, heruntergeladen wird.
Bessere Optionen für die meisten Bilder
Für alles, was größer als ein Icon ist, ist eine normale Datei über HTTP/2 oder HTTP/3 fast immer schneller. Mehrere Anfragen teilen sich eine Verbindung, das Bild wird separat gecacht, und der Browser kann es per Lazy Loading oder mit srcset in der passenden Größe laden.
Einbetten lohnt sich weiterhin für winzige Icons in einer einzelnen Komponente, für Platzhalter, die angezeigt werden, während ein echtes Bild lädt, und für eigenständige HTML-Dateien wie Berichte oder Offline-Demos.
Klein genug zum Einbetten. Es spart eine Anfrage und vergrößert die Datei, die es enthält, kaum.
Grenzfall. Bette es nur ein, wenn es auf einer einzigen Seite im sichtbaren Bereich erscheint; sonst cacht eine normale Datei besser.
Data URI
JSON
unbekannter Typ
, {w} mal {h} px
Datei {file}, kodiert {encoded} ({pct}% der Datei)
SVG-Kodierung
URL-kodiertes SVG ({size})
Base64 ({size})
Format kopieren
... ({n} Zeichen; nutze Kopieren für den vollständigen Text)
Ausgabe für {name}
Kopieren
{name} ist kein Bild und wurde daher übersprungen.
Bilder kodieren
Zieh Bilder hierher oder klicke zum Auswählen. Sie bleiben auf deinem Gerät.