Bild-zu-Base64-Konverter

Konvertieren Sie ein Bild in eine Base64 Data URI mit fertigen HTML- und CSS-Snippets — ganz ohne Upload.

So funktioniert es

  1. Wählen Sie ein Bild (PNG, JPG, WebP, GIF oder SVG) — es wird lokal gelesen, nie hochgeladen.
  2. Das Tool erzeugt die Data URI sowie fertige HTML-- und CSS-background-image-Snippets zum Einfügen.
  3. Kopieren Sie die gewünschte Variante mit einem Klick oder laden Sie die Data URI als Textdatei herunter.

Über dieses Tool

Eine Data URI bettet eine Datei direkt in Text ein: data:image/png;base64, gefolgt von den Bytes der Datei in Base64-Kodierung. Eingefügt in ein -Tag, einen CSS-Hintergrund oder ein JSON-Payload wird das Bild ohne separate Datei und ohne zusätzlichen HTTP-Request dargestellt — das Bild reist im Dokument selbst mit.

Das ist für kleine Bilder wirklich nützlich: Icons in einer einzelnen HTML-Datei, Logos in Transaktions-E-Mails, winzige Platzhalter direkt im CSS, Fixtures in automatisierten Tests. Für große Bilder ist es das falsche Werkzeug — die Base64-Ausgabe ist etwa 33 % größer als die Originaldatei und lässt sich nicht getrennt vom Dokument cachen. Als Faustregel: Bilder unter ein paar Kilobyte einbetten, alles andere als normale Dateien ausliefern.

Die Umwandlung geschieht hier mit der FileReader-API, vollständig auf Ihrem Gerät: Das Bild wird in den Speicher gelesen, kodiert und angezeigt — kein Upload, kein Server, keine Speicherung. Die Größenschätzung neben dem Ergebnis zeigt genau, was der 33-%-Aufschlag für Ihre Datei bedeutet, bevor Sie sich fürs Einbetten entscheiden.

Die Formel

Data-URI-Format: data:{mime-type};base64,{base64-bytes}. Kodierte Größe ≈ Originalgröße × 4/3 (plus ~2 %, wenn Zeilenumbrüche erhalten bleiben).

Häufig gestellte Fragen

Wird mein Bild zu Vai.la hochgeladen?

Nein. Die Datei wird mit der FileReader-API in Ihrem Browser gelesen und verlässt nie Ihr Gerät.

Wann sollte ich eine Data URI statt einer Bilddatei verwenden?

Für kleine Bilder (bis zu wenigen KB), wenn ein gesparter HTTP-Request oder eine einzelne, in sich geschlossene Datei zählt: E-Mail-Signaturen, Einzeldatei-Seiten, Test-Fixtures.

Warum ist die Base64-Version größer als meine Datei?

Base64 stellt je 3 Byte mit 4 Textzeichen dar und fügt so etwa 33 % hinzu. Das ist der Preis dafür, als reiner Text zu reisen.

Welche Formate werden unterstützt?

PNG, JPG, WebP, GIF und SVG. Die Data URI behält Originalformat und MIME-Type — nichts wird neu kodiert.

Verwandte Tools

Lange Links? Kürzen Sie sie kostenlos

Vai.la verwandelt jede URL in einen Kurzlink mit Klick-Statistiken, QR-Code und Ihrem eigenen Biolink.

Vai.la übernimmt keine Verantwortung für die Nutzung der Tools oder für Entscheidungen, die auf ihren Ergebnissen basieren.