TanodTools
DE

Bild in Base64 umwandeln

Wandeln Sie ein Bild in eine Base64-Data-URL um, die Sie direkt in HTML, CSS, Markdown oder JSON einfügen können.

Ihre Dateien verlassen nie Ihr Gerät

Bild hier ablegen

PNG, JPEG, WebP, GIF, BMP, AVIF oder SVG. Oder ziehen Sie es an eine beliebige Stelle dieser Seite.

Wird auf diesem Gerät geöffnet. Nichts wird hochgeladen.

Ein Bild nach dem anderen, bis zu 10 MB. PNG, JPEG, WebP, GIF, BMP, AVIF und SVG.

So wandeln Sie ein Bild in Base64 um

  1. Wählen Sie ein Bild aus oder ziehen Sie es auf die Seite.
  2. Wählen Sie die gewünschte Form: Data-URL, reines Base64, CSS, ein HTML-img-Tag oder Markdown.
  3. Klicken Sie auf Kopieren oder laden Sie den Text als Datei herunter.

Bilder als Text einbetten

HTML, CSS, JSON, Markdown und E-Mail-Texte bestehen aus Text, Bilder dagegen sind binär. Base64 schlägt die Brücke, indem es die Bytes des Bildes mit 64 sicheren Zeichen schreibt. Wenn Sie ein Bild in Base64 umwandeln, kann das ganze Bild in einer Stylesheet-Regel, einem img-Tag oder einer Konfigurationsdatei stehen, ohne separaten Download.

Dieses Tool liest die Datei in Ihrem Browser, prüft ihren tatsächlichen Typ anhand der ersten Bytes und baut das gewählte Snippet um den kodierten Text. Das Bild selbst wird nicht verändert: Dekodiert man das Base64, erhält man exakt die Originaldatei zurück.

Tipps

  • Verkleinern Sie das Bild vorher mit Bild komprimieren oder Bildgröße ändern; jedes eingesparte Byte spart in Base64 ein Drittel mehr.
  • Für einfache Icons ist eine SVG-Datei oft kleiner als jedes PNG, selbst als Base64.
  • Um Base64 wieder in eine Datei zu verwandeln oder eine beliebige andere Datei zu kodieren, nutzen Sie Base64 kodieren und dekodieren.

Häufige Fragen

Was ist eine Data-URL?

Eine Möglichkeit, die Bytes einer Datei in einen Link zu packen. Sie beginnt mit data:, dem Dateityp wie image/png und ;base64,, gefolgt vom Base64-Text. Browser zeigen sie genauso an, als wäre das Bild aus einer separaten Datei geladen worden.

Warum ist das Base64 größer als das Bild?

Base64 schreibt je 3 Bytes als 4 Textzeichen, daher ist der Text etwa 33 Prozent größer als die Datei. Webserver, die Text komprimieren, holen einen Teil davon zurück, doch ein eingebettetes Bild bleibt größer als dasselbe Bild als eigene Datei.

Wann sollte ich ein Bild einbetten?

Für kleine Dinge: Icons, winzige Hintergründe und Platzhalter unter ein paar Kilobyte, oder wenn eine einzige, in sich geschlossene HTML-Datei oder E-Mail gefordert ist. Große Bilder sind als separate Dateien besser, weil eine Data-URL nicht für sich zwischengespeichert werden kann und mit jeder Seite oder jedem Stylesheet, die sie enthalten, erneut heruntergeladen wird. Ab 100 KB warnt Sie das Tool.

Wie wird der Dateityp bestimmt?

Anhand der Bytes in der Datei, nicht anhand ihres Namens. Ein PNG, das mit der Endung .jpg gespeichert wurde, erhält also trotzdem image/png. SVG-Dateien werden an ihrem Text erkannt und als image/svg+xml gekennzeichnet.

Wird mein Bild hochgeladen?

Nein. Das Bild wird in Ihrem Browser auf Ihrem Gerät gelesen und kodiert.