Bild zu Base64

Bilder in Base64-Data-URIs umwandeln — perfekt zum Einbetten in Code

🔒 Dein Bild verlässt 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).
  • Sofortige Konvertierung — Konvertierung erfolgt sofort — keine Verarbeitung erforderlich.

So funktioniert's

  1. Bild hochladen — Lade ein beliebiges Bild hoch, um es in Base64 umzuwandeln.
  2. Kopierformat wählen — Kopiere als Data-URI, <img>-Tag oder CSS-background-image.
  3. 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
  • Inline-Bilder in HTML-E-Mails, die ohne externes Laden angezeigt werden
  • 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 lediglich eine andere Kodierung derselben Binärdaten — keinerlei Qualitätsverlust.

Verwandte Werkzeuge