Bilder in Base64 Data-URLs konvertieren

Bilder direkt in HTML, CSS oder JSON einbetten. Keine Server-Uploads — 100% privat.

base64-converter.js
1const img = await loadImage(file);
2const canvas = document.createElement("canvas");
3const ctx = canvas.getContext("2d");
4ctx.drawImage(img, 0, 0);
5const dataUrl = canvas.toDataURL();
6return btoa(dataUrl);

Bilder hier ablegen

oder klicken zum Auswählen

JPGPNGWebPAVIFHEIC

Dateien verlassen niemals Ihren Browser

Ausgabe-Einstellungen

Wählen Sie, wie Base64 geliefert wird.

Verarbeitung läuft lokal in Ihrem Browser.

Bilder in Base64 konvertieren in drei Schritten

Lokal hochladen, sofort konvertieren und Textdateien kopieren oder herunterladen.

Bilder oder ZIP hochladen

Ziehen Sie Dateien oder ein ZIP-Archiv mit Ordnern hinein.

Base64 generieren

Wir kodieren jedes Bild lokal ohne Uploads.

Kopieren oder herunterladen

In Zwischenablage kopieren oder ZIP mit .txt-Dateien herunterladen.

Wann Base64-Bilder nutzen

Häufige Szenarien, wo inline Base64-Kodierung die Performance verbessert und Deployment vereinfacht.

HTML & CSS Embeds

Kleine Bilder direkt in Code einbetten, um HTTP-Requests zu reduzieren und initiale Ladezeit zu verbessern.

E-Mail-Vorlagen

Logos und Icons in HTML-E-Mails einbetten, damit sie ohne Bildblockierung angezeigt werden.

API Integrationen

Bilder an KI-Vision-APIs, Cloud-Speicher oder Webhooks senden, die Base64-Payloads erwarten.

Single-File Apps

Alle Assets in eine HTML-Datei bündeln für Offline-Tools, Demos oder portable Dokumente.

Base64 Kodierungsfragen

Alles, was Entwickler über Inline-Bildeinbettung wissen müssen.

Wofür wird Base64-Kodierung genutzt?

Base64 wandelt ein Bild in Text um, damit es direkt in HTML img-Tags, CSS background-image Eigenschaften, JSON API Payloads und E-Mail-Vorlagen eingebettet werden kann ohne separaten Dateidownload.

Sollte ich eine Data URL oder Raw Base64 nutzen?

Nutzen Sie eine Data URL (mit dem data:image/...;base64 Präfix) für HTML und CSS Embeds. Nutzen Sie Raw Base64 beim Senden an APIs wie OpenAI Vision oder Cloud-Dienste.

Wie bette ich Base64 in HTML ein?

Nutzen Sie die Data URL direkt im src Attribut: <img src="data:image/png;base64,..." />. Dies eliminiert einen HTTP-Request und das Bild lädt sofort mit der Seite.

Wie nutze ich Base64 in CSS?

Setzen Sie es als background-image: background-image: url("data:image/png;base64,..."). Großartig für kleine Icons, Muster und UI-Elemente.

Werden meine Bilder auf einen Server hochgeladen?

Nein. Alle Base64-Konvertierung passiert lokal in Ihrem Browser mittels JavaScript. Ihre Bilder verlassen nie Ihr Gerät, was dies 100% privat und sicher macht.

Kann ich ein ZIP mit Ordnern konvertieren?

Ja. ZIP-Uploads werden voll unterstützt. Ordnerstruktur bleibt erhalten beim Herunterladen aller Base64-Dateien als ZIP.

Erhöht Base64 die Dateigröße?

Ja, Base64-Kodierung erhöht die Größe um ca. 33%. Für kleine Bilder (Icons, Logos unter 10KB) ist das okay. Für größere Bilder, komprimieren Sie zuerst mit unserem Haupttool.

Gibt es ein Dateigrößen-Limit?

Einzelne Dateien sind auf 25MB begrenzt, um die Browser-Performance flüssig zu halten. Für beste Ergebnisse mit Base64, nutzen Sie Bilder unter 100KB.

Brauchen Sie kleinere Dateien zuerst?

Komprimieren Sie Bilder vor dem Kodieren für schnelleres Einbetten und bessere Performance.