Bild → Base64

Ein Bild in eine Base64-Data-URI mit fertigem <img>- und CSS-Code umwandeln oder eine Data-URI zurück in ein Bild dekodieren — direkt im Browser.

Über Bild → Base64

Was es ist

Dieses Tool kodiert ein Bild — PNG, JPEG, WebP, GIF, AVIF, BMP, ICO oder SVG — in Base64, damit du es direkt in HTML, CSS oder JSON einbetten kannst. Das Ergebnis gibt es als Data-URI, reines Base64 oder bei SVG als URL-kodierte Data-URI, dazu fertigen Code zum Einfügen. Es geht auch umgekehrt: Füge eine Data-URI ein, um das Bild zu sehen und zu speichern.

Hauptfunktionen

  • PNG, JPEG, WebP, GIF, AVIF, BMP, ICO und SVG; der Typ wird aus der Datei selbst erkannt.
  • Ausgabe als Data-URI, reines Base64 oder URL-kodiert (kürzer bei SVG).
  • Fertiger Code für ein <img>-Tag und CSS, mit echter Breite und Höhe.
  • Ein winziger, unscharfer Platzhalter (LQIP) für nachgeladene Bilder.
  • Dekodieren: Füge Base64 oder eine Data-URI ein, um das Bild zurückzubekommen.

So funktioniert es

  1. Zieh ein Bild auf die Fläche, klick sie an, um eines zu wählen, oder klick auf „Beispiel“.
  2. Wähle das Ausgabeformat.
  3. Schalte bei Bedarf den Mikro-Platzhalter (LQIP) ein.
  4. Kopiere das Ergebnis oder den fertigen Code; zum Dekodieren füge eine Data-URI ins Textfeld ein.

Wann es hilft

  • Ein kleines Icon ohne zusätzliche Anfrage in eine CSS-Datei einbetten.
  • Ein Bild in eine HTML-E-Mail oder eine Seite aus einer einzigen Datei einfügen.
  • Nachsehen, welches Bild eine lange Data-URI in einem Code enthält.

Datenschutz und Grenzen

Deine Daten

Dein Bild wird im Browser verarbeitet und nicht auf einen Server hochgeladen — die Website erhält nur ein anonymes Ereignis „Tool geöffnet“, ohne Inhalt. Ein Ergebnis, das du an ein anderes Tool schickst, bleibt 24 Stunden auf diesem Gerät unter „Letzte Aktivität“.

Grenzen

  • Base64 macht ein Bild etwa ein Drittel größer und eignet sich daher eher für kleine Bilder als für Fotos.
  • Ein eingebettetes Bild kann der Browser nicht separat zwischenspeichern.

Häufige Fragen

Wann ist eine Data-URI sinnvoll?

Bei kleinen Icons, Logos und Platzhaltern, bei denen eine gesparte Anfrage mehr zählt als die Größe. Für große Fotos ist eine normale Datei besser: Sie ist kleiner, und der Browser kann sie zwischenspeichern.

Was ist ein LQIP-Platzhalter?

Eine sehr kleine, unscharfe Version des Bildes — ein paar hundert Byte —, die angezeigt wird, während das echte Bild lädt, damit die Seite nicht springt.

Warum ist URL-Kodierung bei SVG besser?

SVG ist Text und lässt sich fast unverändert in eine Data-URI schreiben. URL-Kodierung hält es lesbar und meist kürzer als Base64.