Bild zu Base64

Wählen Sie eine Bilddatei aus, um sie in eine Base64-kodierte Zeichenkette umzuwandeln. Schalten Sie das Daten-URI-Präfix um, um eine direkt verwendbare CSS/HTML-Ausgabe zu erhalten. Die gesamte Verarbeitung erfolgt in Ihrem Browser.

Image preview

Über Bild zu Base64

Dieses Tool konvertiert Bilder vollständig in Ihrem Browser in Base64-kodierte Zeichenketten. Es werden keine Daten an einen Server hochgeladen.

  • Data URI: Mit aktiviertem Präfix ist die Ausgabe direkt verwendbar in CSS background-image oder HTML <img src="...">.
  • Reines Base64: Ohne Präfix erhalten Sie die reine kodierte Zeichenkette.
  • Unterstützt JPEG, PNG, GIF, WebP, SVG und andere vom Browser unterstützte Bildformate.

Ein Bild als Data-URI einzubetten spart eine Anfrage und fügt etwa ein Drittel an Größe hinzu, denn Base64 braucht vier Zeichen je drei Bytes. Für etwas Kleines, das immer gebraucht wird, lohnt dieser Tausch, für ein Foto nicht. Ein eingebettetes Bild lässt sich außerdem nicht getrennt zwischenspeichern und wird mit jeder Kopie der Datei erneut geladen, die es trägt.

Kämpft das Markup gegen Sie?

Escapte Entities, verstümmelte Kodierungen und Inhalte, die im CMS anders aussehen als auf der Seite, heißen meist, dass irgendetwas in der Kette rät. Wir bauen Frontends und den Publishing-Weg dahinter, damit Besucher sehen, was Sie geschrieben haben.

Sprechen Sie mit uns über Ihre Website

Häufig gestellte Fragen

Wann lohnt sich ein Data-URI?
Für kleine Bilder, die sofort gebraucht werden: ein Icon, ein Abstandhalter, ein Logo in einer HTML-Mail, wo externe Bilder standardmäßig blockiert sind. Faustregel: wenige Kilobyte, darüber überwiegt die zusätzliche Größe.
Warum ist die kodierte Fassung größer?
Base64 stellt drei Bytes als vier Zeichen dar, das Ergebnis ist also schon vor jedem Präfix ein Drittel größer. Kompression holt unterwegs etwas davon zurück, im Dokument bleibt die größere Form.
Schadet es dem Zwischenspeicher?
Ja, und das wird oft übersehen. Eine eigene Bilddatei wird einmal gespeichert und wiederverwendet; ein eingebettetes Bild gehört zur Datei und wird bei jeder Änderung erneut geladen. Für Seitenübergreifendes gewinnt das normale Bild.
Welche Formate kann ich einbetten?
Alle, denn Base64 ist der Inhalt gleichgültig. SVG ist der interessante Fall: es ist bereits Text, ein Data-URI ist also oft größer, als das SVG einfach direkt einzufügen.
Wird mein Bild hochgeladen?
Nein. Die Datei wird von Ihrem Browser gelesen und in der Seite kodiert, sie verlässt Ihren Rechner also nie. Das zählt, wenn das Bild ein Screenshot von etwas Internem ist, was meistens der Fall ist.