Was dieses Tool kann
Dieser Konverter wandelt ein Bild in Base64-Text um und liefert den Code im gewünschten Format: als vollständige Data-URI (data:image/png;base64,…), als reinen Base64-String, als fertiges HTML-<img>-Tag, als CSS-Regel mit background-image oder als Markdown. Er unterstützt JPG-, PNG-, WebP-, GIF-, BMP- und SVG-Dateien und zeigt Original- und kodierte Größe an, damit Sie sehen, was das Einbetten kostet.
Es geht auch umgekehrt: Fügen Sie Base64-Daten oder eine Data-URI ein – etwa aus einer JSON-Antwort, dem Quelltext einer E-Mail oder einem Stylesheet – und das Tool zeigt das enthaltene Bild an, erkennt den Dateityp und lässt Sie es als normale Datei herunterladen.
Alles läuft lokal in Ihrem Browser. Weder Ihre Bilder noch Ihre Base64-Daten werden an einen Server gesendet.
Wann es sich lohnt
Kleine Icons in CSS und HTML
Winzige Icons, Ladeanimationen oder Logos direkt in ein Stylesheet oder eine Seite einbetten und so eine HTTP-Anfrage sparen.
E-Mail-Signaturen und Newsletter
Manche E-Mail-Programme brauchen Bilder als eingebettete Data-URI statt als verlinkte Datei.
APIs und JSON
Viele APIs senden und empfangen Bilder als Base64-Strings. Erstellen Sie Testdaten oder prüfen Sie, was eine API zurückgegeben hat.
Dokumente in einer Datei
Eigenständige HTML-Berichte, Demos oder Offline-Seiten erstellen, die ihre Bilder gleich mitbringen.
Tipps für das beste Ergebnis
- Verwenden Sie Base64 nur für kleine Bilder. Ab etwa 10 KB ist eine normale Bilddatei meist schneller, weil der Browser sie separat zwischenspeichern kann.
- Komprimieren Sie das Bild vor dem Umwandeln – jedes eingesparte Kilobyte spart auch 1,33 KB Base64-Text.
- SVG-Icons lassen sich als URL-kodiertes SVG oft noch kompakter einbetten, Base64 funktioniert aber überall.
- Schlägt das Dekodieren fehl, prüfen Sie, ob Sie den vollständigen String inklusive Ende kopiert haben – und nichts darüber hinaus.
So funktioniert das Tool
Die Bilddatei wird mit der FileReader-API des Browsers gelesen, die eine Data-URI erzeugt: den MIME-Typ der Datei, gefolgt von ihren Bytes in Base64-Kodierung. Die anderen Formate werden aus diesem String gebildet.
Beim Dekodieren entfernt das Tool ein vorhandenes Data-URI-Präfix, bereinigt Leerzeichen und Zeilenumbrüche, akzeptiert URL-sicheres Base64 und ergänzt fehlendes Padding. Anschließend prüft es die ersten Bytes (die „Magic Number“), um PNG, JPEG, GIF, WebP, BMP oder SVG zu erkennen. So kann es das Bild auch ohne angegebenen MIME-Typ mit dem richtigen Typ anzeigen und speichern.
Base64 stellt je 3 Bytes mit 4 Textzeichen dar. Deshalb sind kodierte Bilder etwa ein Drittel größer als die Originaldatei.