Bild in Base64
Machen Sie aus einem Bild einen Base64-Code, den Sie direkt in HTML, CSS, JSON oder eine E-Mail-Vorlage einfügen können.
oder hierher ziehen · bis 50 MB, kostenlos
Größere Dateien? Mit Pro wandeln Sie Dateien bis 500 MB umÜber den Gratis-Limits: Sie können den Download ab 1,99 € freischalten.
Wird verarbeitet …
Ihre Datei ist fertig
Kostenlos · Ohne Anmeldung · Ohne Wasserzeichen · Ihre Dateien verlassen Ihr Gerät nicht
Bild in Base64 in 3 Schritten
- Wählen Sie Ihr Bild aus oder ziehen Sie es in das Feld.
- Wählen Sie die Ausgabe: Data-URI, nur Base64, CSS oder HTML-Tag.
- Klicken Sie auf „In Base64 umwandeln“ und kopieren Sie den Code oder laden Sie ihn als .txt-Datei herunter.
Wann sich ein Bild als Base64 lohnt
Base64 schreibt die Bytes einer Datei als reinen Text. So kann ein Bild in einer HTML-Seite, einem Stylesheet, JSON-Daten oder einer E-Mail-Signatur stecken, statt eine eigene Datei zu sein. Das spart bei kleinen Icons und Logos eine Anfrage und ist der einzige Weg, ein Bild über manche APIs und Formularfelder zu schicken, die nur Text annehmen.
Der Preis ist die Größe: Base64-Text ist etwa ein Drittel größer als das Bild und lässt sich nicht separat cachen. Nutzen Sie es für Bilder von wenigen Kilobyte und lassen Sie Fotos als normale Dateien. Für möglichst kurzen Code komprimieren Sie das Bild vorher oder nehmen für Logos und Icons SVG, das in jeder Größe scharf bleibt.
Häufige Fragen
Wie wandle ich ein Bild in Base64 um?
Wählen Sie hier ein Bild aus, legen Sie das Ausgabeformat fest und klicken Sie auf „In Base64 umwandeln“. Der Code erscheint in einem Feld mit einer Kopieren-Schaltfläche, und Sie können ihn auch als .txt-Datei herunterladen. Das funktioniert mit JPG, PNG, GIF, WebP, SVG, AVIF, BMP und ICO.
Was ist eine Data-URI?
Eine Data-URI ist der Base64-Text mit einem kurzen Präfix, das dem Browser den Dateityp mitteilt, etwa data:image/png;base64, gefolgt vom Code. Sie können sie überall verwenden, wo eine Bild-URL erwartet wird, zum Beispiel im src eines img-Tags oder in CSS url().
Wie verwende ich Base64 in HTML oder CSS?
Wählen Sie „HTML-<img>-Tag“, um ein fertiges img-Element zu erhalten, oder „CSS background-image“ für eine Zeile, die Sie in eine Stilregel einfügen können. Beide enthalten die vollständige Data-URI, das Bild wird also ohne separate Datei angezeigt.
Warum ist der Base64-Code größer als das Bild?
Base64 braucht 4 Textzeichen für je 3 Bytes, der Code ist also etwa 33 Prozent größer als die Datei. Für kleine Icons ist das kein Problem, bei Fotos summiert es sich aber schnell. Komprimieren oder verkleinern Sie das Bild vorher, wenn der Code zu lang ist.
Wird mein Bild auf einen Server hochgeladen?
Nein. Das Bild wird in Ihrem Browser auf Ihrem eigenen Gerät gelesen und kodiert, es wird also nie an uns gesendet oder irgendwo gespeichert. Sobald die Seite geladen ist, funktioniert das Tool auch ohne Internetverbindung weiter.