Wie konvertiere ich ein Bild zu base64 (Data-URI) und zurück?
Bild ↔ base64 / Data-URI-Konverter online.
Im "Encode"-Modus lädst du eine Datei hoch und bekommst einen base64-String + eine vollständige data:-URI zum Einfügen in CSS / HTML.
Im "Decode"-Modus fügst du base64 oder eine Data-URI ein, siehst die Bildvorschau und lädst sie als Datei herunter.
Alles läuft lokal - das Bild verlässt deinen Browser nie.
Klasse für Entwickler: Icons in CSS einbetten ohne extra Requests, E-Mail-Signaturen mit Inline-Bildern, Marketing-HTML-Mails debuggen.
So nutzt du das Tool
- Wähl einen Modus: "Encode" (Datei → base64) oder "Decode" (base64 → Datei).
- Encode: wirf eine Datei rein oder klick "Datei wählen". PNG, JPG, WebP, AVIF, HEIC, SVG, GIF.
- Du bekommst zwei Ausgaben: die vollständige `"data:image/...;base64,..."` (fertig für CSS `background-image` oder HTML `src`) und das "Nur base64"-Payload.
- Decode: füge die volle Data-URI oder nur das base64-Payload ein. Das Tool erkennt das Format am Präfix oder nimmt PNG an. Vorschau + Download-Button.
Wann das hilfreich ist
Wo sich base64 und Data-URIs lohnen - typische Verwendungen:
- CSS ohne extra Requests - winzige Icons als background-image: url(data:image/svg+xml;base64,...) eliminieren den Server-Round-Trip.
- E-Mail-Signaturen - eingebettetes Logo braucht kein CDN, funktioniert offline.
- SVG-Sprite-Alternativen - für sehr kleine Icons (<2 KB) ist eine Data-URI oft kleiner als der HTTP-Header-Overhead.
- JSON-Payloads - APIs, die kein multipart-form-data akzeptieren, aber base64-codierte Bilder in JSON.
- E-Mail-Marketing - manche Plattformen (Mailchimp, Brevo) erwarten Bilder als base64.
- Test-Fixtures - in Frontend-Tests (Playwright, Cypress) sind Screenshots oft base64-kodiert.
Fragen und Antworten
Nein. Alles läuft lokal über die FileReader-API. Auch das Decoding - wir decodieren base64 lokal in Bytes, bauen einen Blob-URL. DevTools → Netzwerk = keine Requests.