Bild zu Base64 Konverter online kostenlos
Wandeln Sie Bilder online in einen Base64-String oder eine Data-URI um. Kopieren Sie direkt für HTML, CSS, JSON oder API-Payloads, mit 100 % privater Kodierung auf Ihrem Gerät.
100 % privat. Nichts wird hochgeladen.
Ein Bild in 3 Schritten zu Base64 konvertieren
Laden Sie Ihr Bild hoch
Ziehen Sie eine JPG-, PNG-, WebP-, GIF- oder SVG-Datei in das Feld oder klicken Sie, um eine auszuwählen. Die Datei wird auf Ihrem Gerät gelesen.
Ausgabe kopieren
Sie erhalten die vollständige Daten-URL (data:image/…;base64,…) und die reine Base64-Zeichenfolge, zusätzlich zu Dateigröße und Base64-Größe. Klicken Sie neben der benötigten auf Kopieren.
In Ihren Code einfügen
Verwenden Sie die Daten-URL in einem HTML-img-src oder einem CSS-url(). Nutzen Sie die reine Base64-Zeichenfolge für JSON-Bodys und API-Aufrufe.
Hauptfunktionen
- Ein-Klick-Kopie
- Dateien bleiben auf Ihrem Gerät
- Daten-URI und reines Base64
- JPG, PNG, WebP, GIF, SVG
- Kostenlos, kein Konto nötig
Wann man Base64-kodierte Bilder verwendet
CSS & Styling
- Kleine Icons als Hintergrundbild-Daten-URIs in CSS einbetten
- Einen Ladeindikator oder ein Platzhalterbild in ein Stylesheet einbetten
- UI-Icons einer Komponentenbibliothek direkt in deren CSS ausliefern
- Ein SVG-Muster oder eine Textur ohne separate Datei hinzufügen
HTML & Dokumente
- Ein Bild als Daten-URI direkt in src eines img-Tags einbetten
- Einseitige HTML-Seiten erstellen, die ohne weitere Dateien funktionieren
- Logos oder Diagramme zu HTML-Berichten hinzufügen, die Sie als eine Datei teilen
- Testbilder in Demos und Prototypen anzeigen, ohne sie zu hosten
APIs & Code
- Bilder in JSON-Payloads senden, die Base64-Text erwarten
- Bilder an KI-Vision-API-Anfragen anhängen, die Base64-Eingaben akzeptieren
- Kleine Bilder in Textfeldern einer Datenbank oder Konfigurationsdatei speichern
- Ein Testbild in JavaScript laden, ohne eine separate Dateianfrage zu stellen
Was ist die Base64-Bildkodierung?
Bei der Base64-Bildkodierung werden die Bytes einer Bilddatei in reinen Text aus 64 Zeichen umgewandelt: A–Z, a–z, 0–9, + und /. Dieser Text lässt sich in HTML, CSS oder JSON einbetten, eine Datei nicht. Es handelt sich nicht um Komprimierung oder eine Formatänderung – das Bild bleibt exakt gleich, nur der Text ist etwa ein Drittel größer als die Datei.
Bild zu Base64 für HTML, CSS und APIs
Der Konverter liefert zwei Zeichenfolgen: die vollständige Daten-URL und nur die Base64-Zeichenfolge. Hier erfahren Sie, wo welche hingehört und wann sich das Einbetten eines Bildes lohnt.
Wie verwende ich ein Base64-Bild in HTML oder CSS?
Kopieren Sie die vollständige Daten-URL für HTML und CSS. Kopieren Sie nur die Base64-Zeichenfolge für JSON und die meisten APIs.
- HTML: Fügen Sie die vollständige Daten-URL als src eines img-Tags ein, z. B. src="data:image/png;base64,iVBOR…".
- CSS: Setzen Sie die vollständige Daten-URL in url(), z. B. background-image: url("data:image/png;base64,iVBOR…").
- JSON und APIs: Senden Sie nur die Base64-Zeichenfolge. Wenn die API den Typ benötigt, geben Sie ihn in einem eigenen Feld an, z. B. image/png.
Wann sollten Sie Base64-Bilder verwenden?
Verwenden Sie Base64 für kleine Bilder, die innerhalb einer Textdatei mitreisen müssen. Verzichten Sie bei Fotos und großen Bildern darauf.
- Gut geeignet: Icons, Logos und Platzhalter mit wenigen KB, bei denen sich eine zusätzliche Dateianfrage sparen lässt.
- Gut geeignet: einseitige HTML-Dokumente, Berichte und Demos, die ohne weitere Dateien funktionieren müssen.
- Gut geeignet: APIs und JSON-Payloads, die nur Text akzeptieren.
- Ungeeignet: Fotos und große Bilder. Sie blähen HTML oder CSS auf, und der Browser kann sie nicht getrennt von der Seite cachen.
Wie viel größer macht Base64 ein Bild?
Base64 verwandelt jeweils 3 Bytes in 4 Zeichen, sodass der Text etwa 33 % größer ist als die Datei. Aus einem 30-KB-Bild werden etwa 40 KB Base64. Nach der Konvertierung zeigt das Tool beide Größen nebeneinander an. Um die Zeichenfolge kurz zu halten, verkleinern Sie die Datei zuerst mit dem Bildkompressor.
Funktionieren Base64-Bilder in E-Mails?
Nicht zuverlässig. Gmail entfernt Berichten zufolge häufig Base64-Bilder aus dem Nachrichtentext, und die Unterstützung variiert zwischen anderen E-Mail-Programmen. Verlinken Sie für E-Mails stattdessen ein gehostetes Bild oder hängen Sie es als Inline-Bild (CID) an.
Verwandte Entwicklertools
Tools, um ein Bild vor der Kodierung vorzubereiten.
Base64 zu Bild
Verwandeln Sie eine Base64-Zeichenfolge oder Daten-URI zurück in ein Bild, das Sie ansehen und herunterladen können.
Bildkonverter
Ändern Sie das Bildformat, bevor Sie es kodieren.
Bildmetadaten-Viewer
Sehen Sie sich die EXIF- und anderen Metadaten einer Bilddatei an.
Bildkompressor
Verkleinern Sie die Bilddatei zuerst, damit die Base64-Zeichenfolge kürzer wird.
FAQ: Bild zu Base64
Häufige Fragen zur Konvertierung von Bildern in Base64 und Daten-URIs
Kann ich Base64 zurück in ein Bild umwandeln?
Ja. Fügen Sie die Zeichenfolge in den Base64-zu-Bild-Konverter ein, um sie zu betrachten und als Datei herunterzuladen. Er akzeptiert eine vollständige Daten-URI oder eine reine Base64-Zeichenfolge.
Was ist der Unterschied zwischen einer Daten-URI und einer Base64-Zeichenfolge?
Eine Daten-URI (auch Daten-URL genannt) ist die Base64-Zeichenfolge mit einem Präfix, das den Dateityp angibt, z. B. data:image/png;base64, gefolgt von der Zeichenfolge. Eine reine Base64-Zeichenfolge hat kein Präfix. Verwenden Sie die Daten-URI in HTML und CSS. Nutzen Sie die reine Zeichenfolge für APIs, die den Typ in einem separaten Feld erwarten. Das Tool zeigt beide als vollständige Daten-URL und nur Base64-Zeichenfolge an, jeweils mit eigener Kopieren-Schaltfläche.
Gibt es eine Größenbegrenzung für Base64-Bilder?
Der Konverter hat selbst kein Größenlimit. Große Bilder erzeugen dennoch sehr lange Zeichenfolgen, die Code-Editoren und die sie ladenden Seiten verlangsamen. Halten Sie eingebettete Bilder bei wenigen KB und verlinken Sie größere Dateien stattdessen.
Kann ich SVG zu Base64 konvertieren?
Ja. Ziehen Sie eine SVG-Datei hinein, und Sie erhalten eine Daten-URI, die mit data:image/svg+xml;base64 beginnt. Sie funktioniert in einem img-Tag und in CSS-url(). Bei CSS ist eine URL-kodierte SVG oft kürzer als Base64, da SVG bereits Text ist.
Kann ich die Base64-Zeichenfolge kopieren oder herunterladen?
Sie können sie kopieren. Sowohl die vollständige Daten-URL als auch die reine Base64-Zeichenfolge haben eine Kopieren-Schaltfläche. Es gibt keine Download-Schaltfläche; um das Ergebnis zu speichern, fügen Sie es in eine Textdatei ein. Klicken Sie auf „Vollständige Zeichenfolge anzeigen", um die gesamte Daten-URL auf der Seite zu sehen.
Welche Bildformate kann ich zu Base64 konvertieren?
Jede Datei, die Ihr Browser als Bild erkennt, einschließlich JPG, PNG, WebP, GIF, SVG, AVIF, BMP und ICO. Der Encoder lässt die Datei genau so, wie sie ist: Er skaliert sie nicht, komprimiert sie nicht neu und ändert nicht ihr Format. Passiert nach dem Ablegen einer Datei nichts, hat Ihr Browser sie nicht als Bild erkannt.