Bild in Base64 umwandeln

Bilder als Base64-Data-URI kodieren

Ein Base64-Data-URI verwandelt ein Bild in eine reine Textzeichenfolge, die Sie direkt in Ihr HTML oder CSS einfügen können. Der Browser dekodiert sie im Handumdrehen, sodass das Bild ohne separate Dateianfrage angezeigt wird – praktisch für winzige Icons, E-Mail-Vorlagen und eigenständige Einzeldatei-Seiten.

Dieses Tool liest Ihre Datei lokal ein und gibt den vollständigen data:-URI aus, dazu fertige <img>- und CSS-background-image-Snippets, die Sie mit einem Klick kopieren können. Es wird nichts hochgeladen – die Kodierung erfolgt vollständig in Ihrem Browser.

Wann Inlining sinnvoll ist (und wann nicht)

Inlining spart eine HTTP-Anfrage, was kleine, kritische Bilder beschleunigen kann. Base64 ist jedoch etwa 33 % größer als die Binärdatei und lässt sich nicht separat zwischenspeichern. Vermeiden Sie es daher bei großen Fotos oder Bildern, die auf vielen Seiten verwendet werden. Als Faustregel gilt: Binden Sie Icons bis zu wenigen Kilobyte inline ein und behalten Sie größere Bilder als normale Dateien.

So verwenden Sie das Ergebnis

Der Data-URI behält den ursprünglichen Dateityp bei, zum Beispiel data:image/png;base64, gefolgt von den kodierten Bytes, und die Statuszeile zeigt, wie viele Kilobyte Text entstanden sind. Nutzen Sie die drei Kopier-Schaltflächen je nach Einsatzzweck: den reinen URI für einen src- oder href-Wert, das <img>-Tag für HTML (ergänzen Sie anschließend einen aussagekräftigen alt-Text) oder die CSS-Zeile für ein Stylesheet.

Praktische Hinweise

• Eine lange Base64-Zeichenfolge macht Ihre HTML- oder CSS-Datei größer und langsamer lesbar und wird mit jeder Seite, die sie enthält, erneut heruntergeladen. Gzip oder Brotli gleichen einen Teil des Overheads aus, aber die Bilddaten sind bereits komprimiert, daher ist die Einsparung begrenzt.
• Wenn Ihre Website eine Content Security Policy nutzt, muss img-src data:-URIs erlauben.
• Viele E-Mail-Programme blockieren oder entfernen Data-URIs. Testen Sie daher, bevor Sie sich in Newslettern darauf verlassen.
• Komprimieren oder verkleinern Sie das Bild zuerst; eine kleinere Quelle ergibt eine deutlich kürzere Zeichenfolge.

Gut geeignete Kandidaten für Inlining

Kleine Icons, winzige Platzhalterbilder, Ladeanimationen, einfache Logos und Bilder in Einzeldatei-HTML- Demos passen am besten. Fotos, Hero-Banner und alle Bilder, die auf vielen Seiten erscheinen, liefern Sie besser als separate Dateien aus, damit der Browser sie zwischenspeichern kann. Die Kodierung erfolgt in Ihrem Browser, und der kopierte Text verlässt Ihr Gerät nicht, bis Sie ihn selbst irgendwo einfügen.