ToolKitHive
Zurück
design

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.

Bild zu Base64

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:

  1. Daten-URI — Vollständiger data:image/...;base64,...-String. Verwenden Sie ihn direkt in src-Attributen oder CSS url().
  2. Nur Base64 — Roher Base64-String ohne Daten-URI-Vorfix. Nützlich für API-Payloads.
  3. HTML-Tag — Vollständiges <img>-Element mit src, alt, width und height.
  4. CSS-Hintergrund — Bereit zur Verwendung: background-image: url(...).

So verwenden Sie das Tool

  1. Bild hochladen — Ziehen Sie und fallen Sie das Bild in das Drop-Zone, oder klicken Sie, um Ihre Dateien durchzusehen.
  2. Bild vorabsehen — Sehen Sie das hochgeladene Bild und seine Dateiinformationen (Name, Größe, Typ, Abmessungen).
  3. Ausgabeformat wählen — Wählen Sie Daten-URI, Nur Base64, HTML-Tag oder CSS-Hintergrund.
  4. 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.

enptesdejafrruitnltrarzh