Bilder-in-Base64-Konverter - Data-URIs lokal generieren

Kostenloser Online-Bilder-in-Base64-Konverter. Codieren Sie PNG-, JPG-, SVG-, WebP- oder GIF-Bilder lokal in Data-URIs für CSS-Hintergründe und HTML-img-Tags – ganz ohne Uploads.

Klicken für Theatermodus

Konvertierungsergebnisse

Laden Sie ein Bild hoch, um Data-URIs, CSS- und HTML-Code anzuzeigen.

Bedienungsanleitung

  1. Ziehen Sie PNG-, JPG-, SVG-, WebP- oder GIF-Bilder in den Upload-Bereich oder klicken Sie zum Auswählen von Dateien.
  2. Prüfen Sie die Bildvorschau, den MIME-Typ, die Originalgröße und die resultierende Größe der Data-URI.
  3. Kopieren Sie die vollständige Data-URI, den reinen Base64-String, den CSS-background-image-Code oder das HTML-<img>-Snippet.
  4. Fügen Sie den Code in Ihre CSS-, HTML-, E-Mail-Vorlagen oder JSON-Konfigurationen ein.

Beispiel: Klicken Sie auf „SVG-Beispiel laden“, um ein lokales SVG-Symbol als Data-URI zu laden und direkt CSS- oder HTML-Snippets zu kopieren.

Kernfunktionen

  • Sofortige Data-URI-Generierung: Ziehen Sie Bilder einfach per Drag-and-Drop in das Feld und erstellen Sie direkt im Browser eine data:image/...;base64,...-URI.
  • Direkt nutzbare CSS- & HTML-Snippets: Kopieren Sie fertigen CSS-background-image- oder HTML-<img>-Code, ohne Präfixe manuell schreiben zu müssen.
  • Unterstützung gängiger Bildformate: Funktioniert mit PNG, JPG, SVG, WebP, GIF, AVIF und anderen vom Browser lesbaren Bildtypen.
  • Stapelverarbeitung: Laden Sie mehrere Symbole oder UI-Grafiken in die Warteschlange und kopieren Sie das jeweils benötigte Snippet pro Datei.
  • 100 % lokaler Datenschutz: Bilder werden ausschließlich lokal über die native FileReader-API des Browsers verarbeitet. Nichts wird hochgeladen.

Verwandte Tools

Base64-Bild-Encoder & -Decoder - Data URL + CSS-Generator

Base64-Bild-Encoder/Decoder: Konvertieren Sie Dateien in Data-URLs, decodieren Sie Strings zurück in Downloads und kopieren Sie CSS-Background-Code – WebP-Unterstützung, lokal & datenschutzfreundlich.
Base64-zu-Bild-Konverter - Lokale Vorschau

Decodieren Sie Base64- oder Data-URI-Bilder direkt im Browser, nutzen Sie die Sofortvorschau und laden Sie diese im Originalformat, als PNG, JPG oder WebP herunter.
Sicherer JSON-Formatter & -Validator - Lokale Typgenerierung

Sicherer JSON-Formatter: JSON-Dokumente lokal im Browser formatieren, validieren und korrigieren. Bequemes Pretty-Print/Minify, Fehlerhervorhebung, TypeScript- oder Zod-Generierung, Konvertierung in XML.
Kostenloser JSONPath-Tester & -Evaluator | Echtzeit-Abfragen

Kostenloser JSONPath-Tester und Evaluator für API-JSON. Extrahieren Sie passende Knoten in Echtzeit, prüfen Sie Pfade und kopieren Sie JSON-Ergebnisse lokal im Browser.
JSON-zu-CSV-Konverter - Lokaler Tabellenexport

Konvertieren Sie JSON-Objekte oder -Arrays lokal im Browser in CSV-Dateien. Bringen Sie verschachtelte Felder in eine flache Struktur, nutzen Sie die Vorschau und kopieren oder laden Sie CSV-Daten herunter.
CSV-zu-JSON-Konverter - Lokaler Echtzeit-Parser

Konvertieren Sie CSV-Texte oder -Dateien lokal im Browser in JSON-Arrays. Unterstützt Kopfzeilen, Komma-/Semikolon-/Tab-Trennzeichen, Drag-and-Drop, Kopieren und Downloads ohne Server-Uploads.
JSON-Diff-Checker - Lokaler semantischer Vergleich

Vergleichen Sie zwei JSON-Dokumente lokal in Ihrem Browser. Sortieren Sie Objektschlüssel für einen semantischen Diff, ignorieren Sie die Reihenfolge der Schlüssel und markieren Sie hinzugefügte, gelöschte und geänderte Felder ohne Server-Uploads.
JSON-Minifier & -Kompressor

Komprimieren Sie formatiertes JSON in eine einzige Zeile. Entfernen Sie Einrückungen, Zeilenumbrüche sowie überflüssige Leerzeichen und vergleichen Sie Dateigrößen in Echtzeit.

Berechnungslogik

Die Base64-Codierung wandelt binäre Bilddaten in einen ASCII-String um, wodurch Bilder direkt in HTML, CSS oder JSON eingebettet werden können. Eine Data-URI folgt der Struktur data:[mime-type];base64,[encoded-data], die vom Browser als Bildressource interpretiert wird.

Wichtiger Kompromiss: Base64 ist keine Bildkomprimierung. Die codierte Datei ist in der Regel etwa 33 % größer als das Original. Daher eignet sich diese Methode am besten für kleine Symbole, Logos, E-Mail-Grafiken oder zur Reduzierung von HTTP-Anfragen. Große Fotos und umfangreiche Grafiken sollten weiterhin als reguläre Dateien bereitgestellt und separat komprimiert werden.

Häufig gestellte Fragen

Warum sollte ich ein Bild in Base64 konvertieren?

Es ist ideal, um kleine Icons, E-Mail-Bilder oder Konfigurationsgrafiken direkt in den Code einzubetten. Dies reduziert HTTP-Anfragen und verhindert, dass E-Mail-Clients blockierte Remote-Bilder nicht anzeigen.

Reduziert Base64 die Bildgröße?

Nein. Die Codierung erhöht die Dateigröße um etwa 33 %. Sie dient der Einbettung und Abfrage-Optimierung, nicht der Speicherplatz-Komprimierung.

Welche Bildformate werden unterstützt?

PNG, JPG, JPEG, SVG, WebP, GIF, AVIF und alle anderen vom Browser lesbaren Bildformate.

Werden meine Bilder hochgeladen?

Nein. Die Konvertierung nutzt die native FileReader.readAsDataURL-API des Browsers, sodass Ihre Dateien auf Ihrem Gerät verbleiben.

Can ich CSS- oder HTML-Code direkt kopieren?

Ja. Für jedes Bild werden die vollständige Data-URI, der reine Base64-String, der CSS-background-image-Code und das HTML-<img>-Snippet erzeugt.