Bild zu Data-URI
Bilder in Base64-Data-URIs umwandeln: fertig als CSS-Hintergrund, img-Tag oder Markdown, mit Größenvergleich – lokal im Browser.
Bild zu Data-URI wandelt Bilder, Icons und Schriften in eine Data-URI um, die direkt im CSS oder HTML steht, ohne eigene Datei. Du erhältst fertigen Code für background-image, img-Tag, Markdown oder @font-face und siehst, wie stark die Größe durch die Base64-Kodierung wächst. SVGs werden auf Wunsch kompakter URL-kodiert. Alles läuft lokal im Browser.
Aufbau einer Data-URI
Eine Data-URI bettet den Inhalt einer Datei direkt in eine Adresse ein: data:[Medientyp];base64,[Daten]. Browser behandeln sie wie eine normale URL,
laden aber nichts nach.
| Einsatz | Sinnvoll? |
|---|---|
| Kleines Icon im CSS (< 2 KB) | Ja |
| Hintergrundmuster als SVG | Ja, URL-kodiert |
| Bilder in HTML-E-Mails | Bedingt, viele Mail-Programme blockieren sie |
| Fotos, große Grafiken | Nein |
| Webfonts | Selten, nur für kleine Teilmengen |
SVGs als CSS-Hintergrund mit Farbanpassung erzeugt SVG zu CSS; vorher verkleinert sie der SVG-Optimierer.
Häufige Fragen
Wann lohnt sich eine Data-URI?
Bei sehr kleinen Dateien wie Icons oder Mustern unter etwa 2 bis 4 KB. Sie sparen eine Anfrage und erscheinen sofort. Größere Bilder machen CSS und HTML schwer, werden nicht separat gecacht und verzögern die Darstellung. Dafür sind normale Dateien besser.
Warum wird die Datei größer?
Base64 stellt je 3 Bytes mit 4 Zeichen dar. Die Data-URI ist deshalb rund 33 Prozent größer als die Originaldatei. GZIP oder Brotli auf dem Server gleichen das teilweise aus.
Warum SVG ohne Base64?
SVG ist Text. URL-kodiert ist es meist kleiner als Base64 und lässt sich besser komprimieren. Nur die Zeichen <, >, # und % müssen ersetzt werden, Anführungszeichen werden zu einfachen Anführungszeichen.
Werden meine Dateien hochgeladen?
Nein. Die Datei wird mit der FileReader-Schnittstelle direkt im Browser gelesen und umgewandelt.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.