Bild zu Base64

Bilder in Base64-Kodierung umwandeln

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

cloud_upload

Dateien hierher ziehen

oder durchsuchen zum Hochladen

Supports PNG, JPG, WebP, GIF, SVG

In deinem Browser verarbeitet - deine Datei verlässt dieses Gerät nie.

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Base64-Kodierung macht aus den Binärdaten eines Bildes einen Klartext-String, der direkt in HTML, CSS oder JSON eingebettet werden kann – keine separate Bilddatei nötig. Üblich für kleine Icons/Logos inline im Code, E-Mail-Templates oder Data-URIs, wo ein Extra-File-Fetch unpraktisch ist.

So verwendest du dieses Tool

  1. Bilddatei hochladenWähle das Bild, das du als Text einbetten willst.
  2. Base64-String erzeugenWandle binäre Bildbytes sofort in Base64-Ausgabe um.
  3. Data-URI-Format kopierenNutze den bereitgestellten `data:image/...;base64,`-String zum Einbetten in HTML/CSS/JSON.
  4. In der Ziel-App testenFüge ihn in deinen Code ein und prüfe das Rendering in Browser/E-Mail/Client.

Ein Base64-Bild in HTML und CSS nutzen

In HTML setzt du die Data-URI ins src-Attribut eines img-Tags, in CSS nutzt du sie als Hintergrund mit background-image: url(data:image/png;base64,…). Das Bild lädt dann mit der Seite selbst, ohne zusätzliche Anfrage.

Base64 macht das Bild etwa ein Drittel größer, und es kann nicht separat gecacht werden – nutze es also für kleine Icons und Logos von wenigen Kilobyte. Größere Bilder gehören als normale Dateien ausgeliefert.

Warum es nutzen

  • Betten kleine Assets direkt in den Quellcode ein, ohne separate Dateien.
  • Nützlich für E-Mail-Templates und Single-File-HTML-Prototypen.
  • Spart extra HTTP-Requests für winzige Icons.
  • Schnelle Konvertierung mit kopierfertiger Ausgabe.

Häufige Anwendungen

  • Logos in transaktionalen E-Mail-Templates inlinen.
  • Icons in CSS-Hintergründe oder SVG-Payloads einbetten.
  • Bildinhalt als Text durch JSON-APIs schicken.
  • Eigenständige Demo-HTML-Dateien erstellen.

Tipps für bessere Ergebnisse

  • Nutze Base64 vor allem für kleine Dateien wie Icons und Badges.
  • Behalte die Originaldatei für cache-effiziente Produktivauslieferung.
  • Prüfe, dass der MIME-Type-Prefix zum echten Bildformat passt.
  • Miss die Bundle-Größe, bevor du im großen Stil inlinest.

Fehler, die du vermeiden solltest

  • Große Fotos einbetten und HTML-/CSS-Payloads aufblähen.
  • Das `data:`-Prefix vergessen und das Bild-Rendering zerbrechen.
  • Annehmen, Base64 verbessere Qualität oder Kompression.
  • Base64 überall nutzen, statt Browser-Caching zu nutzen.

Häufig gestellte Fragen

Ja – die Base64-Textdarstellung ist grob 33 % größer als die originale Binärdatei, ein normaler Trade-off fürs Einbetten als Text.

Füge ihn in eine Data-URI wie <code>data:image/png;base64,...</code> ein und nutze das direkt als <code>src</code> oder CSS-<code>background-image</code>-Wert statt eines normalen Bildpfads.

Base64-Einbettung funktioniert am besten für kleine Icons/Logos. Große Bilder werden große Textklumpen, die deine HTML-/CSS-Datei aufblähen und Caching-Vorteile einer separaten Bilddatei verlieren.

In HTML setzt du den ganzen data:-String (data:image/png;base64,...) in das src-Attribut eines Bild-Tags, in CSS nutzt du background-image: url(data:image/png;base64,...). Das data:-Präfix muss zum Bildtyp passen.

Die Unterstützung ist lückenhaft - mehrere große Clients, darunter Gmail, zeigen data:-URI-Bilder nicht an. Für E-Mails hoste das Bild und verlinke es oder hänge es mit einer Content-ID an.

Für winzige Icons und Platzhalter spart das Einbetten eine zusätzliche Anfrage. Für alles über wenige Kilobyte ist eine normale Bilddatei besser, weil Browser sie separat cachen können.

Related guides