Bild zu Base64

So funktioniert es

1. Das Bild hinzufügen. PNG, JPEG, GIF, WebP, AVIF, SVG, BMP und ICO gehen alle.
2. Wählen, was darum herum stehen soll — nackte Data-URI, CSS-Regel oder img-Tag.
3. Das Ergebnis kopieren.
4. Auf den Größenhinweis achten. Inlining spart eine Anfrage und lohnt sich früher nicht mehr, als man denkt.

Häufige Fragen

Wird das Bild neu kodiert oder komprimiert?

Nein. Die Bytes der Datei werden gelesen und so kodiert, wie sie sind: ein optimiertes PNG bleibt optimiert, ein animiertes GIF bleibt animiert. Ein Werkzeug, das „hilfsbereit“ neu kodiert, verändert stillschweigend die Farben eines Icons.

Wie viel größer wird es?

Etwa ein Drittel. Base64 macht aus drei Bytes vier, dazu kommt das Präfix. Das ist der Preis für eine gesparte HTTP-Anfrage.

Wann lohnt sich Inlining wirklich?

Für etwas Kleines, das sofort gebraucht wird — ein Icon, ein 1×1-Platzhalter, ein winziges Logo in einer E-Mail. Ab ein paar Kilobyte kosten die zusätzlichen Bytes bei jedem Seitenaufruf mehr, als die gesparte Anfrage einbringt.

Kann ich ein SVG so einbetten?

Sie können, und oft sollten Sie nicht: ein SVG ist Text und kann direkt ins HTML, wo CSS es einfärben kann. Base64 ist für den Fall, dass es eine einzige undurchsichtige Zeichenkette sein muss.

Wird etwas hochgeladen?

Nein. Alles läuft in Ihrem Browser.