Bild zu Base64
Konvertieren Sie Bilder in Base64-kodierte Strings zum Einbetten in HTML/CSS.
So Verwenden Sie
Bild hochladen
Wählen Sie eine Bilddatei aus oder ziehen Sie sie.
Base64 erhalten
Sehen Sie den Base64-kodierten String.
Ergebnis kopieren
Kopieren Sie Data-URI oder Raw-Base64.
Funktionen
Häufig Gestellte Fragen
Sie können PNG, JPEG, GIF, WebP, SVG, BMP und ICO-Bilder in Base64 konvertieren. Alle gängigen Formate werden unterstützt.
Konvertieren Sie Bilder in Base64-kodierte Strings zum direkten Einbetten in HTML, CSS oder JavaScript. Eliminieren Sie zusätzliche HTTP-Anfragen indem Sie kleine Bilder inline in Ihren Code einfügen.
Wussten Sie?
Daten-URLs (die Base64-Kodierung verwenden) wurden erstmals 1998 vorgeschlagen und in RFC 2397 standardisiert. Obwohl sie HTTP-Anfragen sparen, können Browser Daten-URLs nicht wie reguläre Bilder cachen, sodass sie bei jedem Seitenaufruf neu heruntergeladen werden!
Profi-Tipps
- Verwenden Sie nur für kleine Bilder (<10KB) - größere Dateien blähen Ihren Code auf
- Daten-URLs funktionieren in img src, CSS background-image und mehr
- Base64 fügt ~33% zur Dateigröße hinzu, also berechnen Sie den Trade-off sorgfältig
Häufige Anwendungsfälle
- Einbetten von Icons in CSS für Single-File-Styling
- Erstellen eigenständiger HTML-E-Mail-Vorlagen
- Reduzieren von HTTP-Anfragen für Performance
- Einschließen von Bildern in JSON-APIs
- Erstellen offline-fähiger Web-Apps
Best Practices
- Optimieren Sie Bilder vor der Konvertierung um die Base64-String-Länge zu minimieren
- Erwägen Sie SVG für Icons - sie sind oft kleiner als Text
- Fügen Sie den korrekten MIME-Typ im Daten-URL-Präfix ein
Andere Kategorien Erkunden
Entdecken Sie weitere nützliche Tools aus anderen Kategorien
Wortzähler
Zählen Sie Wörter, Zeichen, Sätze und Absätze in Ihrem Text sofort.
JSON Formatierer
Formatieren, validieren und verschönern Sie Ihre JSON-Daten mit Syntaxhervorhebung.
Prozent Rechner
Berechnen Sie Prozentsätze, prozentuale Änderungen und Prozente von Zahlen.
Meta Tag Generator
Generieren Sie HTML Meta-Tags für SEO-Optimierung mit Titel, Beschreibung, Schlüsselwörtern und mehr.