Bild zu Base64

Ziehe ein Bild auf den Upload-Bereich, klicke zum Durchsuchen, füge es aus der Zwischenablage ein oder lade es über eine URL. Das Tool konvertiert das Bild sofort in einen Base64-String und zeigt eine kopfertige Data-URI an — als CSS, HTML oder Markdown. Alles geschieht im Browser — das Bild wird niemals auf einen Server hochgeladen, was es sicher für private oder sensible Bilder macht.

Wechsle zum Tab „Base64 → Bild" und füge eine Data-URI (data:image/png;base64,…) oder einen reinen Base64-String ein. Das Tool dekodiert ihn, zeigt eine Vorschau des Bildes und ermöglicht den Download als Datei. Das Format wird automatisch erkannt, sodass PNG, JPG, SVG, WebP und GIF alle funktionieren. Die gesamte Dekodierung läuft lokal im Browser — es wird keine Serveranfrage gestellt und dein Base64-String wird nirgendwo übertragen.

Verwende die Base64-Data-URI als src eines img-Tags: Füge den kodierten String in src="data:image/png;base64,…" ein. Klicke oben auf „<img> kopieren", um ein vollständiges, einfügefertiges Bild-Tag ohne separate Datei-Anfrage zu erhalten — ideal für E-Mails, Single-File-Seiten und eingebettete Icons. Dies spart einen zusätzlichen HTTP-Round-Trip und funktioniert auch dann, wenn die ursprüngliche Bilddatei nicht verfügbar ist.

Referenziere die Data-URI innerhalb von url() — zum Beispiel background-image: url("data:image/png;base64,…"). Klicke oben auf „CSS kopieren", um die vollständige background-image-Regel zu erhalten. Das Einbetten kleiner Hintergründe und Icons auf diese Weise spart eine HTTP-Anfrage und ist gängig für Design-System-Icons, Lade-Animationen und dekorative Elemente, die sich selten ändern. Es macht auch Single-File-HTML-Demos vollständig eigenständig.

Im Browser liest du die Datei mit der FileReader-API: const reader = new FileReader(); reader.onload = () => console.log(reader.result); reader.readAsDataURL(file). reader.result ist die vollständige data:image/...;base64-URI. In React oder Next.js rufe dies in einem useEffect oder einem onChange-Handler an einem Input-Element auf. Dieser Konverter verwendet genau diesen Ansatz, vollständig clientseitig. Du kannst die Ausgabe hier verwenden, um deine eigene JavaScript-Implementierung schnell zu überprüfen, ohne einen lokalen Server einrichten zu müssen.

Öffne die Datei im Binärmodus und kodiere sie: import base64; data = base64.b64encode(open('image.png', 'rb').read()).decode(); uri = f'data:image/png;base64,{data}'. Mit PIL/Pillow kannst du ein Bild zunächst in einen BytesIO-Puffer speichern und dann die Bytes des Puffers base64-kodieren. Verwende dieses Online-Tool, um zu überprüfen, ob deine Python-Ausgabe dem erwarteten Ergebnis entspricht, bevor du sie in Produktionscode einbettest.

Eine Data-URI bettet Bild-Bytes direkt in HTML, CSS, JSON oder E-Mails als Text ein, sodass das Bild zusammen mit dem Dokument geladen wird, anstatt als separate HTTP-Anfrage. Sie eignet sich ideal für kleine Icons, Logos in HTML-E-Mails, Single-File-Demos und das Speichern kleiner Bilder in Datenbanken oder Konfigurationsdateien. Entwickler nutzen sie auch, um CORS-Einschränkungen beim Laden von Bildern in Canvas-Operationen zu umgehen. Favicons werden häufig als Data-URIs im HTML-Head eingebettet, um einen zusätzlichen Netzwerk-Round-Trip beim ersten Laden zu vermeiden.

In der Regel nicht. Die Base64-Kodierung macht Daten etwa 33 % größer als das ursprüngliche Binärformat, und eingebettete Bilder können weder separat vom Browser gecacht noch mit loading="lazy" verzögert geladen werden. Reserviere Base64 für kleine, selten wechselnde Assets wie Favicons, kleine Logos oder Icon-Sprites unter ca. 10 KB. Für große Fotos, Hero-Images oder Assets, die auf vielen Seiten wiederverwendet werden, belasse sie als normale Bilddateien mit korrekten HTTP-Caching-Headern.

Ja, vollständig sicher. Kodierung und Dekodierung laufen ausschließlich in deinem Browser über die FileReader- und Canvas-APIs — deine Bilder verlassen niemals dein Gerät und es wird nichts an einen Server gesendet. Dies ist ein wesentlicher Datenschutzvorteil gegenüber Tools wie <strong>base64.guru</strong> und <strong>base64encoder.io</strong>, die deine Bilder zur Verarbeitung auf ihre Server hochladen. Bei UtiloKit bleiben private, vertrauliche oder unveröffentlichte Bilder während der gesamten Konvertierung auf deinem Rechner. Du kannst sogar nach dem Laden der Seite die Internetverbindung trennen — das Tool funktioniert weiterhin.

Jedes Format, das dein Browser lesen kann, funktioniert für die Kodierung, einschließlich PNG, JPEG/JPG, SVG, WebP, GIF, AVIF, BMP und ICO. Die Dekodierung unterstützt jeden standardmäßigen data:image/*-MIME-Typ und zeigt eine Vorschau des Ergebnisses vor dem Download. SVG-Dateien erhalten eine spezielle Behandlung — ihr Base64 kann auch direkt in CSS ohne Kodierung über url('data:image/svg+xml,…') mit URL-Kodierung eingebettet werden, aber Base64 ist universeller und funktioniert in allen Browsern und E-Mail-Clients.

Ja. Verwende die Schaltfläche „Markdown kopieren" für  oder „<img> kopieren" für HTML-E-Mail. Beachte, dass einige E-Mail-Clients (insbesondere Outlook und die mobile App von Gmail) Base64-Bilder entfernen oder blockieren — teste daher vor dem Versand an ein breites Publikum. Für Newsletter-Kampagnen ist es sicherer, Bilder auf einem CDN zu hosten und darauf zu verlinken. Für transaktionale E-Mails an einzelne Empfänger funktioniert Base64 in den meisten Clients zuverlässig.

Base64.guru und base64encoder.io verarbeiten deine Bilder beide serverseitig — deine Dateien werden auf deren Infrastruktur hochgeladen. UtiloKits Bild-zu-Base64-Konverter läuft zu 100 % in deinem Browser: kein Upload, kein Server, keine gespeicherten Daten. UtiloKit bietet außerdem einfügefertige CSS-, HTML- und Markdown-Snippets, unterstützt bidirektionale Konvertierung (Kodieren und Dekodieren) und funktioniert offline, sobald die Seite geladen ist. Es ist zudem vollständig kostenlos ohne Einschränkungen bei Dateigröße oder Anzahl der Konvertierungen.

Vollständig kostenlos, ohne Anmeldung, ohne Wasserzeichen und ohne Einschränkungen bei Dateigröße oder Anzahl der Bilder. Im Gegensatz zu browserling.com, das kostenlose Bildkonvertierungen begrenzt und für Dateien über einer bestimmten Größe einen kostenpflichtigen Plan erfordert, hat UtiloKit keine Einschränkungen. Da es clientseitig läuft, fallen keine Kosten pro Bild oder für Bandbreite an — konvertiere so viele Bilder wie du möchtest, so groß wie der Arbeitsspeicher deines Browsers erlaubt.

Ja. Das Tool ist vollständig responsiv und funktioniert in jedem mobilen Browser, einschließlich Safari auf dem iPhone und Chrome auf Android. Du kannst tippen, um Bilder aus deiner Fotobibliothek oder der Dateien-App auszuwählen, oder eine URL eingeben, um ein Remote-Bild zu laden. Die Ausgabe wird in deine Zwischenablage kopiert, sodass du sie direkt in Notion, einen Code-Editor oder eine andere App einfügen kannst. Kein App-Download erforderlich — öffne einfach die Seite in deinem mobilen Browser, und es funktioniert genauso wie die Desktop-Version.