Wie wandle ich ein Bild in einen Base64-Data-URI für CSS um?

Ziehen Sie ein Bild hinein oder fügen Sie es ein (Strg+V), öffnen Sie dann den Tab CSS und klicken Sie auf Kopieren. Sie erhalten eine Regel background-image: url(...) mit eingebettetem Data-URI. Die Tabs HTML, Markdown, Reines Base64 und JSON funktionieren genauso.

Warum ist die Base64-Ausgabe etwa ein Drittel größer als mein Bild?

Base64 wandelt je 3 Bytes in 4 Textzeichen um, daher ist der Text etwa 33 % größer als die Datei. Deshalb eignen sich Data-URIs für kleine Icons und Logos, nicht für große Fotos.

Wie kann ich den Base64-String kürzer machen?

Öffnen Sie zuerst Verkleinern und legen Sie eine Maximale Breite oder ein Format (WebP, JPEG oder PNG) fest und senken Sie die Qualität bei WebP oder JPEG. SVG- und GIF-Dateien lassen sich so nicht verkleinern; für SVG gibt es stattdessen den Tab SVG (URL-kodiert).

Kann ich einen Base64-String wieder in ein Bild umwandeln?

Ja. Stellen Sie die Richtung auf Base64 zu Bild und fügen Sie einen Data-URI oder reines Base64 ein. PNG, JPEG, GIF, WebP, SVG, BMP, ICO und AVIF werden erkannt, danach können Sie die Datei herunterladen. Bei ungültiger Eingabe erscheint eine Fehlermeldung.

Warum schlägt Kopieren fehl oder die Vorschau wirkt bei einem großen Bild abgeschnitten?

Die Vorschau zeigt nur die ersten 2000 Zeichen, Kopieren und Herunterladen liefern aber den vollständigen Wert. Sehr lange Strings können das Zwischenablage-Limit des Browsers überschreiten. Nutzen Sie dann Herunterladen oder verkleinern Sie das Bild zuerst.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Werden meine Dateien hochgeladen?

Nein. Ihre Dateien werden in Ihrem Browser geöffnet und verarbeitet und nicht an LibraTool gesendet. Einige Tools laden zuerst eine Verarbeitungs-Engine oder ein KI-Modell in Ihren Browser; dieser Download enthält keine Daten von Ihnen.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss. Sehr große Dateien können auf dem Smartphone langsam sein oder den Speicher sprengen; nutzen Sie dafür einen Computer.

🖼️

Bild zu Base64 – kostenlos

Konvertieren Sie ein Bild in eine Base64-Data-URI zur direkten Einbettung in CSS, HTML oder Markdown. Fertige Snippets zum Kopieren. Im Browser kodiert; nie hochgeladen.

Dateigröße hängt von Ihrem Gerät abDateien bleiben privatKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

Datei hierher ziehen oder zum Auswählen klicken

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · Verarbeitung auf Ihrem Gerät

oder drücken Sie Strg+V, um aus der Zwischenablage einzufügen

Dateien durchsuchen

Tipp: Sie können auch ein Bild aus der Zwischenablage einfügen (Strg+V).

Ihre Dateien verlassen nie Ihr Gerät. Die gesamte Verarbeitung findet lokal in Ihrem Browser statt.

Konvertieren Sie ein Bild in eine Base64-Data-URI, die Sie direkt in CSS, HTML oder Markdown einfügen können — keine separate Datei erforderlich. Kodierung im Browser, keine Uploads.

Häufige Anwendungen

Bild in CSS einbindenBetten Sie ein kleines Symbol oder einen Hintergrund als Daten-URI in Ihr Stylesheet ein.
Bild in HTML einbettenBetten Sie ein Logo oder Symbol direkt in eigenständiges HTML ein.
SVG oder Symbol in Base64 konvertierenKonvertieren Sie ein kleines Symbol in einen Daten-URI zum Einbinden.
Bild in Markdown einbettenBetten Sie ein kleines Bild mit Daten-URI in eine Markdown-Datei ein.
Bild-Daten-URI abrufenErstellen Sie einen rohen Daten-URI, den Sie überall verwenden können.

So funktioniert es

Eine Data-URI bettet ein Bild direkt als Text in Ihren Code ein, damit es ohne separate Dateianforderung geladen wird — praktisch für kleine Symbole und eigenständiges HTML. Die Kodierung erfolgt im Browser.

1
Sie laden ein Bild
Es wird lokal mit der FileReader-API gelesen — niemals hochgeladen.
2
Es ist Base64-kodiert
Die Bildbytes werden direkt im Browser zu einer data:-URI (data:image/...;base64,…).
3
Sie wählen ein Snippet
Kopieren Sie die reine Data-URI oder fertiges CSS (background-image), HTML (<img>) oder Markdown.
4
Fügen Sie es in Ihren Code ein
Das Bild wird nun inline mit Ihrem CSS/HTML übertragen — keine zusätzliche Datei zum Hosten.

Das Bild wird vollständig auf Ihrem Gerät kodiert. Beachten Sie, dass Base64 ~33 % größer als das Original ist, daher sind Data-URIs am besten für kleine Bilder.

Bild zu Base64 – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

Bild-Steganografie (Text in Bild verstecken)

Base64-Encoder & -Decoder

URL-Encoder & -Decoder

Häufige Fragen