Bild zu Base64

Ein Bild in eine Base64-Data-URI umwandeln, Text in Base64 kodieren und dekodieren — und Base64 wieder in eine Datei verwandeln

✓ Für immer kostenlos · ✓ Keine Anmeldung · ✓ Kein Upload · ✓ Offline-fähig

🔒 Deine Daten verlassen nie dein Gerät. Die gesamte Verarbeitung erfolgt lokal in deinem Browser mit FileReader API. Kein Upload, kein Server, kein Tracking.

Funktionen

Data-URI-Ausgabe — Erhalte einen vollständigen data:image/...-URI-String, bereit zum direkten Einfügen in HTML, CSS oder JavaScript.
Ein-Klick-Kopieren — Kopiere als rohe Data-URI, als <img>-Tag oder als CSS-background-image-Eigenschaft.
Größenvergleich — Sieh die Originaldateigröße vs. die Base64-Stringlänge (Base64 ist ~33% größer).
Auch Text und Dekodieren — Beliebigen Text als UTF-8-Base64 kodieren (Standard oder URL-sicher), Base64 zurück in Text dekodieren oder einen Base64-String in eine Datei verwandeln, die du ansehen und herunterladen kannst.

So funktioniert's

Bild hochladen — Lade ein beliebiges Bild hoch, um es in Base64 umzuwandeln.
Kopierformat wählen — Kopiere als Data-URI, <img>-Tag oder CSS-background-image.
In deinen Code einfügen — Der Base64-String bettet das Bild direkt in deinen Code ein — keine separate Datei nötig.

Anwendungsfälle

Kleine Bilder direkt in HTML einbetten, um HTTP-Anfragen zu reduzieren
Eigenständige HTML-Dateien (Berichte, Offline-Seiten), die ihre Bilder mitbringen — Achtung: Gmail und Outlook blockieren Data-URI-Bilder in E-Mails
CSS-Hintergrundbilder in Stylesheets eingebettet
Icons in JavaScript-Code für Einzeldatei-Distribution bündeln

Häufig gestellte Fragen

Wann sollte ich Base64 verwenden?

Für kleine Bilder (unter 10 KB) — Icons, Logos, kleine UI-Elemente. Einbetten vermeidet zusätzliche HTTP-Anfragen. Für größere Bilder ist es besser, sie als separate Dateien bereitzustellen.

Warum ist der Base64-String größer als die Datei?

Base64-Kodierung erhöht die Größe um ~33%, da Binärdaten in ASCII-Text umgewandelt werden. Dies ist ein Kompromiss für die Möglichkeit, das Bild direkt in Code einzubetten.

Bleibt die volle Bildqualität erhalten?

Ja. Base64 ist nur eine andere Kodierung genau derselben Bytes — kein Qualitätsverlust. Eine Ausnahme: Ein iPhone-HEIC-Foto wird zuerst in JPEG umgewandelt, weil Browser HEIC nicht aus einer Data-URI anzeigen; die Seite sagt es dir, wenn das passiert.

Kann es auch Base64 dekodieren?

Ja — wechsle zu Text ⇄ Base64 und wähle Dekodieren. Füge Base64 oder eine ganze data:-URI ein; Leerzeichen, Zeilenumbrüche und URL-sicheres Base64 werden gelesen. Ergibt es Text, siehst du den Text; ist es eine Datei (PNG, JPG, PDF, ZIP …), eine Vorschau, wo möglich, und einen Download. Ein falsches Zeichen wird mit Position genannt.

Was ist URL-sicheres Base64?

Dieselbe Kodierung mit - und _ statt + und /, meist ohne =-Padding, damit es ohne Escaping in eine URL oder ein JWT passt. Beim Kodieren „URL-sicher“ ankreuzen; beim Dekodieren werden beide Varianten automatisch gelesen.

Aus dem Blog

📖 How to Encode and Decode Base64 (and Turn an Image Into a Data URI) — Encode and decode Base64 text, and convert a small image into a data URI you can inline in CSS or HTML — all locally in your browser, nothing uploaded.