Bild zu Base64

Dieser Bild-zu-Base64-Konverter verwandelt ein Bild in eine Data-URI, eine lange Textzeichenkette, die das Bild direkt einbettet, plus ein einsatzbereites CSS-Hintergrund-Snippet. Du kannst ein Bild einbetten, anstatt auf eine separate Datei zu verlinken.

Er laeuft lokal in deinem Browser, sodass dein Bild auf deinem Geraet gelesen und nie hochgeladen wird.

Eine Data-URI traegt das gesamte Bild im Markup, sodass der Browser keine separate Netzwerkanfrage stellt, um es zu laden. Bei kleinen Assets wie Icons kann diese eingesparte Anfrage eine Seite schneller wirken lassen.

Der Haken sind Groesse und Caching. Base64 fuegt etwa 33 Prozent Mehraufwand hinzu, weil es Binaerdaten mit einem begrenzten Textalphabet darstellt, und ein eingebettetes Bild kann nicht separat zwischengespeichert werden, sodass es mit jeder Seite, die es enthaelt, erneut heruntergeladen wird.

Als Faustregel gilt: kleine Bilder einbetten, Icons, winzige Logos oder ein Sprite, wo sich das Vermeiden einer Anfrage lohnt, und groessere Bilder als normale Dateien belassen, die der Browser zwischenspeichern und parallel laden kann.

Data-URIs funktionieren ueberall dort, wo eine URL akzeptiert wird: ein img-src, ein CSS-Hintergrund oder ein Feld in JSON oder einer E-Mail-Vorlage. Das macht sie praktisch fuer in sich geschlossene Snippets.