Bild zu Base64 sofortiger Data URI.

Bild ablegen – erhalten Sie einen sofort einsatzbereiten Data URI für CSS, HTML, JSON oder E-Mails. Läuft direkt in Ihrem Browser.

So konvertieren Sie

Ziehen Sie ein beliebiges PNG, JPG, GIF, SVG oder WebP in das Fenster.

Der vollständige data:image/...;base64,... String erscheint im Ausgabefeld.

Verwenden Sie ihn in CSS url(), HTML <img src> oder JSON-Konfigurationen.

Betten Sie Icons unter 1 KB direkt ein, um Netzwerkanfragen zu vermeiden.

Wenn Sie keine externen Assets verlinken können.

Eliminieren Sie zusätzliche HTTP-Anfragen für kritische Hintergrundbilder.

Bündeln Sie Bilder direkt im Quellcode für die vollständige Offline-Nutzung.

Was ist Base64-Bildkodierung?

Base64 kodiert Binärdaten als ASCII-Text – so können Sie Bilder direkt in CSS, HTML oder JSON einbetten.

Wann sollte ich Base64 statt einer URL verwenden?

Für winzige Bilder, E-Mails oder Inline-CSS. Für alles Größere verwenden Sie eine gehostete URL – Base64 erhöht die Dateigröße um ca. 33%.

Warum ist der Base64-String so groß?

Base64 benötigt 4 Zeichen pro 3 Bytes – das entspricht einem Overhead von ca. 33%.

Wird etwas hochgeladen?

Nein. Es wird lokal über FileReader.readAsDataURL verarbeitet.

SVG-Kodierung?

Funktioniert. URL-Kodierung kann bei SVGs jedoch kleiner sein.

Wie verwende ich es in CSS?

Fügen Sie es in url() ein – background-image: url('data:image/png;base64,...').

Wie in HTML?

Fügen Sie es in das img src Attribut ein: <img src="data:image/png;base64,...">.

Gibt es eine Dateigrößenbeschränkung?

Praktische Browser-Limits liegen bei etwa 2 MB für Inline Data URIs.

Für Bilder über 2 KB ist eine CDN-URL schneller.