ToolsMaxxing

Bild in Base64

Kodiere ein Bild als Base64-String oder Data-URL.

oder Bilder hierher ziehen

Bilder als JPG, PNG, WebP, GIF, AVIF, BMP oder SVG · Mehrere Dateien möglich

Deine Dateien bleiben auf deinem Gerät

  1. 1Dateien hinzufügen
  2. 2Anpassen
  3. 3Herunterladen

So funktioniert es

  1. 1Wähle ein oder mehrere Bilder aus oder ziehe sie auf die Seite.
  2. 2Wähle die Ausgabe: eine Data-URL, reinen Base64-Text, ein HTML-img-Tag oder ein CSS-background-image.
  3. 3Wähle „Alles kopieren“, um den Text zu kopieren, oder „Als .txt speichern“, um ihn als Datei zu behalten.
  4. 4Füge ihn in deinen Code, deine E-Mail-Vorlage oder dein Stylesheet ein.

Was die Optionen bewirken

Data-URL
Der vollständige Text „data:image/png;base64,...“. Er funktioniert direkt als src eines Bildes oder in einem CSS-url().
Nur Base64-Text
Nur die kodierten Zeichen, für APIs und JSON-Felder, die reines Base64 verlangen.
HTML-img-Tag
Ein fertiges img-Element mit der Data-URL darin.
CSS-background-image
Eine CSS-Zeile, die das Bild als Hintergrund verwendet.

Datenschutz

Dieses Tool läuft in deinem Browser. Deine Dateien werden nie auf einen Server hochgeladen.

Häufige Fragen

Wird mein Bild hochgeladen?

Nein. Das Bild wird in deinem Browser kodiert, und der Text wird nur dir angezeigt.

Warum ist der Base64-Text größer als das Bild?

Base64 schreibt je 3 Bytes als 4 Zeichen, daher ist der Text etwa ein Drittel größer als die Datei.

Wann sollte ich eine Data-URL nutzen?

Für kleine Dinge wie Icons, ein winziges Logo in einer E-Mail oder einen Platzhalter. Bei größeren Bildern ist eine normale Datei schneller, weil Browser sie zwischenspeichern können.

Funktioniert es mit SVG?

Ja. SVG-Dateien werden als image/svg+xml-Data-URLs kodiert.

Kann ich Base64 wieder in ein Bild umwandeln?

Füge die Data-URL in die Adressleiste eines Browsers ein, um sie anzusehen, oder nutze einen Base64-Decoder auf der Seite der Entwickler-Tools.

Ähnliche Tools