Was ist ein Bild-zu-Base64-Konverter?
Ein Bild-zu-Base64-Konverter wandelt eine Bilddatei in Text um, der in einer Data-URL stehen kann. Base64-Text stellt die Bildbytes mit gewöhnlichen Zeichen dar und kann daher in HTML, CSS, JSON und anderen textbasierten Formaten eingebettet werden. Dieses Tool erzeugt die vollständige Data-URL und den rohen Base64-Wert direkt in Ihrem Browser.
Wählen Sie ein Bild und der Konverter liest es von Ihrem Gerät. Sie können die vollständige Data-URL kopieren, wenn Sie etwas Fertiges für eine Bildquelle brauchen, oder nur den Base64-Teil, wenn ein Formular oder eine API den kodierten Wert ohne Präfix erwartet. Die Datei wird nie auf einen Server hochgeladen.
So kodieren Sie ein Bild
- Laden Sie ein Bild von Ihrem Gerät hoch.
- Kopieren Sie die Data-URL für die direkte Nutzung in einem img-src oder CSS-Wert.
- Kopieren Sie nur Base64, wenn das Ziel die kodierte Nutzlast ohne Präfix verlangt.
- Bewahren Sie die Originaldatei auf; Base64 eignet sich zum Einbetten, nicht als Ersatz für organisierte Assets.
Eine Data-URL beginnt mit Metadaten wie data:image/png;base64, gefolgt von den kodierten Zeichen. Der Präfix sagt der Software, welchen Bildtyp sie liest. Rohes Base64 lässt diesen Präfix weg, ist also kürzer, benötigt aber, dass der Dateityp separat bekannt ist.
Wann sollten Sie Base64 nutzen?
Base64 kann kleine, in sich geschlossene Assets vereinfachen — etwa winzige Icons in einer E-Mail-Vorlage oder ein Entwicklungsbeispiel, das nicht von einem separaten Dateipfad abhängen soll. Es hilft auch, wenn eine API Bildtext in einer JSON-Anfrage akzeptiert. Base64-Text ist jedoch größer als die zugrunde liegende Binärdatei und daher meist kein guter Weg, große Fotos in eine Produktionsseite einzubetten.
Private Browser-Kodierung
Die Kodierung läuft über die FileReader-API des Browsers. Ihr Bild bleibt auf dem Computer oder Telefon und der erzeugte Text erscheint nur auf dieser Seite. Seien Sie vorsichtig beim Teilen eines Base64-Strings: Er enthält den kompletten Bildinhalt und kann sehr lang sein. Für öffentliche Websites bevorzugen Sie normale optimierte Bilddateien, es sei denn, das Einbetten eines kleinen Assets hat einen klaren Vorteil.