Bild zu Base64
Kodieren Sie ein Bild als Base64-Data-URI für CSS oder HTML.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
- Dateigröße
- —
- Kodierte Größe
- —
Großes Bild: Ein so großer Data-URI bläht die Seite auf. Ab einigen Dutzend KB ist eine normale Datei besser.
Lokal verarbeitet: Ihr Bild verlässt das Gerät nicht.
Bild in zwei Sekunden zu Base64 kodieren
Mit einem Data-URI betten Sie ein Bild direkt in Ihren Code ein, ohne externe Datei. Bild ablegen, Ausgabeformat wählen — roher Data-URI, CSS-Eigenschaft oder HTML-Tag — und Ergebnis kopieren.
-
Bild ablegen
PNG, JPG, WebP, GIF, SVG… jedes Bildformat wird akzeptiert und unverändert übernommen: keine Neukodierung, kein Verlust.
-
Ausgabe wählen
Roher Data-URI, einfügefertiges CSS background-image oder ein vollständiges HTML-<img>-Tag.
-
Kopieren
Ein Klick auf Kopieren und der Code ist in der Zwischenablage, mit Größen vorher/nachher.
Wann Base64 sinnvoll ist (und wann nicht)
| Situation | Data-URI? | Warum |
|---|---|---|
| Icon oder Logo < 10 KB | Ja | Spart eine HTTP-Anfrage, sofortige Anzeige |
| HTML-E-Mail | Ja | Externe Bilder werden oft standardmäßig blockiert |
| Foto oder Banner > 100 KB | Nein | +33 % Gewicht, kein separates Caching, langsameres Rendering |
| Bild auf mehreren Seiten wiederholt | Nein | Eine normale Datei wird nur einmal gecacht |
Tipp: Bei Vektor-Icons ist inline SVG (direkt ins HTML eingefügt) oft leichter und schärfer als die Base64-Version.
Häufige Fragen
Was ist ein Data-URI?
Eine URL, die die Dateidaten direkt enthält, in der Form data:image/png;base64,iVBOR… Sie funktioniert überall, wo eine Bild-URL erwartet wird: src-Attribut, CSS background-image, Favicon…
Warum ein Bild in Base64 kodieren?
Um das Bild direkt in HTML, CSS oder JSON einzubetten — ohne separate Datei und ohne zusätzliche HTTP-Anfrage. Praktisch für kleine Icons, HTML-E-Mails oder eigenständige Prototypen.
Erhöht Base64 die Dateigröße?
Ja, um etwa 33 % gegenüber der ursprünglichen Binärdatei. Das ist der Preis der Textdarstellung. Die gzip/brotli-Kompression des Servers holt einen Teil zurück, aber für große Bilder bleibt eine normale Datei effizienter.
Bis zu welcher Größe ist es sinnvoll?
Als Faustregel: Data-URIs nur für Bilder unter einigen Dutzend KB (Icons, Logos, kleine Muster). Darüber blähen sie die Seiten auf, verhindern separates Caching und verlangsamen das Rendering.
Wird mein Bild irgendwohin gesendet?
Nein. Lesen und Kodieren übernimmt die FileReader-API Ihres Browsers. Das Bild verlässt Ihr Gerät nie.