So wandeln Sie ein Bild in Base64 um
- Ziehen Sie ein Bild in das Feld, klicken Sie, um eines auszuwählen, oder fügen Sie es mit Strg+V aus der Zwischenablage ein.
- Wählen Sie das Ausgabeformat: Data-URI, reines Base64, HTML, CSS, Markdown oder JSON.
- Klicken Sie auf Kopieren und fügen Sie den Code in Ihr HTML, CSS, E-Mail-Template oder Ihre API-Anfrage ein.
Wann lohnt es sich, Bilder als Base64 einzubetten?
Inline eingebettete Base64-Bilder sparen einen HTTP-Request – praktisch für kleine Icons, E-Mail-Signaturen, HTML-Dokumente in einer einzigen Datei und API-Payloads. Da Base64 rund 33 % größer ist als die Originaldatei und nicht separat gecacht werden kann, sollten Sie für Fotos und alles, was größer als ein paar Kilobyte ist, normale Bilddateien verwenden.
Die Ausgabeformate im Überblick
- Data-URI –
data:image/png;base64,…fürsrc-Attribute und CSS. - Nur Base64 – der reine String für APIs und Datenbanken.
- HTML / CSS / Markdown – fertige Snippets, die Sie direkt einfügen können.
- JSON – Dateiname, MIME-Typ und Daten in einem Objekt.
Häufig gestellte Fragen
Wird das Bild durch die Umwandlung in Base64 größer?
Ja, um etwa ein Drittel. Ein PNG mit 30 KB ergibt rund 40 KB Base64-Text. Wenn es auf die Größe ankommt, komprimieren oder verkleinern Sie das Bild vorher.
Welche Bildformate kann ich umwandeln?
Jedes Format, das Ihr Browser öffnen kann: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF und weitere. Der passende MIME-Typ wird automatisch in die Data-URI eingefügt.
Wie verwende ich ein Base64-Bild in CSS?
Wählen Sie das Format „CSS-Hintergrundbild“ und fügen Sie das Ergebnis in Ihre Regel ein, zum Beispiel .logo { background-image: url("data:image/png;base64,…"); }.