Base64-Bild-Encoder & -Decoder
Bilder in Base64-Data-URLs umwandeln und zurück. Datei ablegen oder Data-URL einfügen — verlässt nie Ihren Browser.
Was ist eine Base64-Data-URL?
Eine Data-URL packt eine kleine Datei direkt in einen String der Form data:<mime>;base64,<payload>. Browser behandeln sie wie jede andere URL — du kannst sie in <img src>, ein CSS-background-image oder eine E-Mail-Signatur fallen lassen. Base64 bläht die Originalbytes um ~33 % auf, daher eignet es sich am besten für winzige Assets (Icons, Sprites, kleine Avatare). Für alles Größere willst du in der Regel eine reguläre Bilddatei hinter einem CDN.
So nutzen Sie dieses Tool
Im Encode-Modus legst oder wählst du ein Bild und kopierst die Variante, die du brauchst: vollständige Data-URL, rohes Base64 (ohne Präfix) oder einen fertigen <img>-Tag. Im Decode-Modus fügst du eine beliebige Data-URL oder einen rohen Base64-String ein, und das Bild wird in der Vorschau zurück gerendert — praktisch, wenn du eines im CSS eines anderen oder einem exportierten HTML-Mailing findest und sehen willst, was es eigentlich ist. Wechsle den Modus mit dem Chip oben.
Wann (und wann nicht) Bilder einbetten
Gut geeignet: winzige Logos und Icons, die in derselben HTML/CSS-Datei ausgeliefert werden, Signaturgrafiken in Transaktionsmails, das Einbetten eines Assets in eine Single-File-HTML-Demo. Schlecht geeignet: Hero-Images, Foto-Galerien, alles, was über mehrere Seiten wiederverwendet wird — Base64 schaltet das HTTP-Caching für dieses Asset aus, blockiert paralleles Bild-Laden, bläht den HTML/CSS-Payload auf und schadet dem Largest Contentful Paint. Faustregel: unter ~2 KB kodiert ist meist okay; darüber lieber eine normale Datei.
Gängige MIME-Typen
Der MIME-Typ nach data: sagt dem Browser, wie er den Payload dekodieren soll — ein Fehler hier (z. B. ein JPG als image/png ausliefern) bricht das Bild in manchen Browsern stillschweigend.
| Format | MIME-Typ | Hinweise |
|---|---|---|
| PNG | image/png | Lossless, supports transparency. Best for icons and UI. |
| JPG / JPEG | image/jpeg | Lossy. Best for photos. No transparency. |
| WebP | image/webp | Smaller than PNG/JPG; supported by all modern browsers. |
| GIF | image/gif | Animated, 256-colour. Heavier than WebP/MP4 for video. |
| SVG | image/svg+xml | Vector. Prefer URL-encoded over base64 in CSS. |
Häufig gestellte Fragen
Verlässt das Bild meinen Browser?
Warum ist der Base64-String so viel länger als die Datei?
data:<mime>;base64, noch ein paar Bytes hinzu.Kann ich ein SVG ohne Base64 einbetten?
data:image/svg+xml;utf8,<svg…>) und bleiben deutlich kleiner als die Base64-Form. Dieses Tool gibt dir die Base64-Version aus Kompatibilitätsgründen; für Produktiv-CSS bevorzuge die URL-kodierte Variante.Werden inline eingebettete Bilder vom Browser gecacht?
Kann ich einen beliebigen Base64-String dekodieren?
data:-Präfix hat, versucht das Tool, den Bildtyp anhand der Magic Bytes zu erkennen (PNG, JPG, GIF, WebP, SVG). Schlägt die Erkennung fehl, bekommst du einen "invalid"-Fehler und kannst manuell ein Präfix data:image/png;base64, voranstellen.Warum enthält meine Data-URL Zeilenumbrüche?
<img src>, aber ein paar Systeme nicht. Dieses Tool gibt Base64 immer einzeilig aus; falls du im Decode-Modus einen umbrochenen String einfügst, entfernen wir den Whitespace vor dem Dekodieren.