Bild in Base64

So benutzt du Bild in Base64

1. Wähl dein Bild.
2. Sieh dir den Umfang des Ergebnisses an.
3. Kopier als Data-URI, als img-Tag oder als CSS-Hintergrund.

Wann es sich lohnt

Die Abwägung ist einfach: eine Anfrage weniger, etwa ein Drittel mehr Bytes.

Lohnt sich bei kleinen Bildern, die immer gebraucht werden: ein Symbol, ein kleines Logo, ein Hintergrundmuster. Unter etwa fünf Kilobyte ist es fast immer günstig.

Lohnt sich nicht bei großen Bildern. Ein Foto von mehreren hundert Kilobyte bläht dein HTML oder CSS entsprechend auf, und die werden immer geladen — auch von Besuchern, die das Bild nie zu sehen bekommen.

Wichtiger Nachteil: Ein eingebettetes Bild wird nicht separat zwischengespeichert. Steht es in deinem CSS, wird es bei jeder Änderung dieser Datei erneut mitgeschickt. Eine eigene Datei bleibt im Cache.

Für E-Mail gilt anderes: Viele Programme blockieren externe Bilder, aber viele blockieren auch Data-URIs. Einbetten ist dort keine verlässliche Lösung.

In der Praxis

Optimier das Bild, bevor du es umwandelst. Base64 auf einem unkomprimierten PNG ist doppelt schade.

Für einfache Symbole ist eine SVG-Datei oft besser als ein Base64-PNG: kleiner, in jeder Größe scharf und ohne Kodierung direkt einsetzbar.

Halte den Aufbau ein: Eine Data-URI beginnt mit dem Medientyp und dem Hinweis base64, gefolgt von einem Komma und den Daten. Kopier das Ganze, nicht nur den hinteren Teil.

In CSS steht sie in Anführungszeichen innerhalb der url-Funktion. In HTML kommt sie direkt ins src-Attribut.

Alles läuft in deinem Browser.

Häufige Fragen