Bild ↔ Base64 Konverter
Bilder in Base64-Data-URLs umwandeln und zurück — mit CSS- und HTML-Snippets
Über dieses Tool
Bild ablegen, auswählen oder einfügen — und du bekommst sein Base64 in jeder Form, die du brauchen könntest: eine sofort nutzbare Data-URL, eine CSS-background-image-Deklaration, ein vollständiges <img>-Tag mit echten Abmessungen und den rohen Base64-Payload. Die Gegenrichtung funktioniert auch: Data-URL oder nacktes Base64 einfügen, und das Bild wird dekodiert, als Vorschau angezeigt und lässt sich als Datei herunterladen.
Das Format wird an den Magic Bytes erkannt, nicht an der Dateiendung oder dem deklarierten MIME-Typ — ein zu .jpg umbenanntes PNG (oder eine falsch beschriftete Data-URL) konvertiert also trotzdem korrekt. Die Größenanzeige ist ehrlich, was die Kosten angeht: Base64 bläht Daten um rund ein Drittel auf, und die exakte kodierte Größe steht direkt neben der Originalgröße, damit du entscheiden kannst, ob sich das Einbetten lohnt.
Anders als bei den meisten Bild-zu-Base64-Seiten wird nichts hochgeladen — die Datei wird mit der FileReader-API des Browsers gelesen und in der Seite kodiert. Das macht das Tool sicher für Screenshots interner Dashboards, unveröffentlichte Produktbilder oder alles andere, was du lieber nicht dem Server eines Fremden anvertraust.
Häufige Fragen
- Wann sollte ich ein Bild als Base64 einbetten statt eine Datei zu verlinken?
- Wenn das Bild klein ist (grob unter 10 KB), sich selten ändert und sonst einen zusätzlichen HTTP-Request kosten würde — Icons, Logos in E-Mails, Ein-Datei-HTML-Dokumente. Für alles Größere gewinnt die separate Datei: Sie wird unabhängig gecacht, lädt parallel und bläht dein HTML oder CSS nicht um 33 % auf.
- Warum ist die Base64-Version rund ein Drittel größer als meine Datei?
- Base64 stellt je 3 Binärbytes als 4 ASCII-Zeichen dar — ein struktureller Overhead von +33 % (plus bis zu zwei Füllzeichen). Gzip oder Brotli auf dem Server holt einen Teil zurück, aber die Aufblähung steckt in der Kodierung selbst — sie tauscht Größe gegen die Fähigkeit, Binärdaten in Text einzubetten.
- Kann ich eine Data-URL dekodieren, die ich in einem Stylesheet oder HTML gefunden habe?
- Ja — wechsle zu Base64 → Bild und füge alles ein, samt data:-Präfix. Auch prozent-kodierte SVG-Data-URLs (die ohne ;base64) werden dekodiert, Zeilenumbrüche und Leerzeichen im Payload automatisch entfernt. Das Ergebnis erscheint als Vorschau und lädt mit der richtigen Endung herunter.
- Funktioniert das mit SVG, GIF und ICO oder nur mit PNG und JPEG?
- Alles, was der Sniffer erkennt, lässt sich in Base64 wandeln: PNG, JPEG, WebP, GIF, SVG, BMP, ICO und AVIF. Speziell bei SVG gilt: Die XML-Quelle ist direkt eingebettet oft kleiner und lesbarer — SVG in Base64 lohnt sich vor allem, wenn Anführungszeichen oder Escaping zum Problem werden.