Bild zu Base64
Kostenloses Online-Tool, um Bilder in Base64-Daten-URIs zu konvertieren. Unterstützt PNG, JPEG, GIF, SVG, WebP und BMP. Kopieren oder herunterladen Sie den kodierten String sofort.
Konvertieren Sie jedes Bild in eine Base64-Daten-URI, um es direkt in HTML, CSS oder JSON einzubetten.
title: Bild zu Base64-Konverter — Online-Tool description: Konvertieren Sie jedes Bild in eine Base64-Daten-URI-Datei. Unterstützt PNG, JPEG, GIF, SVG, WebP und BMP. Kostenlos, privat und läuft vollständig im Browser. date: 2026-05-17
Was ist Base64-Bildcodierung?
Die Base64-Codierung wandelt binäre Bilddaten in einen Textstring aus Buchstaben, Zahlen, +, / und = um. In Kombination mit einem MIME-Typ-Vorfix erzeugt sie eine Daten-URI — einen selbstständigen String, den Sie direkt in HTML, CSS oder JSON einbetten können, ohne eine separate Datei.
Statt auf eine externe Datei zu verweisen:
<img src="logo.png" alt="Logo" />
können Sie das Bild inline einbetten:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo" />
Warum Bilder in Base64 konvertieren?
| Vorteil | Beschreibung |
|---|---|
| Weniger HTTP-Anfragen | Einbetten kleiner Bilder beseitigt separate Datei-Downloads |
| E-Mail-Vorlagen | Viele E-Mail-Clients laden externe Bilder nicht — Base64 funktioniert inline |
| Einzelne Dateien für Apps | Icons und Assets in eine HTML-Datei bündeln für einfaches Teilen |
| API-Payloads | Bilder als Strings in JSON senden ohne multipart-Uploads |
| Offline-Dokumente | Selbstständige HTML-Berichte, die ohne Server funktionieren |
Unterstützte Bildformate
| Format | MIME-Typ | Dateiendung |
|---|---|---|
| PNG | image/png |
.png |
| JPEG | image/jpeg |
.jpg, .jpeg |
| GIF | image/gif |
.gif |
| SVG | image/svg+xml |
.svg |
| WebP | image/webp |
.webp |
| BMP | image/bmp |
.bmp |
Maximale Dateigröße: 10 MB.
Ausgabeformate
Dieses Tool bietet vier Ausgabeformate:
- Daten-URI — Vollständiger
data:image/...;base64,...-String. Verwenden Sie ihn direkt insrc-Attributen oder CSSurl(). - Nur Base64 — Roher Base64-String ohne Daten-URI-Vorfix. Nützlich für API-Payloads.
- HTML-Tag — Vollständiges
<img>-Element mitsrc,alt,widthundheight. - CSS-Hintergrund — Bereit zur Verwendung:
background-image: url(...).
So verwenden Sie das Tool
- Bild hochladen — Ziehen Sie und fallen Sie das Bild in das Drop-Zone, oder klicken Sie, um Ihre Dateien durchzusehen.
- Bild vorabsehen — Sehen Sie das hochgeladene Bild und seine Dateiinformationen (Name, Größe, Typ, Abmessungen).
- Ausgabeformat wählen — Wählen Sie Daten-URI, Nur Base64, HTML-Tag oder CSS-Hintergrund.
- Kopieren oder herunterladen — Klicken Sie auf "Kopieren", um in die Zwischenablage zu kopieren, oder "Herunterladen", um als Textdatei zu speichern.
Wann Base64 verwenden (und wann nicht)
Gute Anwendungsfälle:
- Kleine Icons und UI-Elemente (unter 10 KB)
- Bilder für E-Mail-Newsletter
- Einzelne HTML-Prototypen
- JSON-API-Payloads, bei denen multipart nicht verfügbar ist
Vermeiden Sie:
- Große Fotos oder Hintergrundbilder (erhöht die Dateigröße um ca. 33%)
- Webseiten mit vielen Bildern (kein Browser-Caching für eingebettete Daten)
- Wiederholte Bilder auf mehreren Seiten (Base64 kann nicht separat zwischengespeichert werden)
Datenschutz und Sicherheit
Alle Verarbeitungsschritte finden vollständig im Browser statt. Ihre Bilder werden nie auf einen Server hochgeladen. Die Base64-Konvertierung wird clientseitig über die FileReader-API durchgeführt.
Häufig gestellte Fragen
Erhöht Base64 die Dateigröße? Ja. Die Base64-Codierung erhöht die ursprüngliche Dateigröße um etwa 33%. Ein 3 KB großes PNG wird in Base64 ungefähr 4 KB groß.
Kann ich Base64 wieder in ein Bild konvertieren? Ja. Sie können einen Daten-URI in die Adressleiste eines Browsers einfügen, um das Bild anzuzeigen, oder ein Base64-Decodertool verwenden, um es als Datei zu speichern.
Gibt es eine Dateigrößenbegrenzung?
Dieses Tool akzeptiert Bilder bis zu 10 MB. Für größere Dateien verwenden Sie ein Kommandozeilentool wie base64 unter Linux/macOS.
Funktioniert es mit SVG-Dateien? Ja. SVG-Dateien werden wie Rasterbilder in Base64 konvertiert. Beachten Sie, dass Sie SVG-Markup auch direkt in HTML einbetten können, um die Leistung zu verbessern.