Bild in Base64 umwandeln
Ein Bild kostenlos in eine Base64-Data-URI umwandeln, fertig zum Einfügen in HTML oder CSS. PNG, JPG, WebP, GIF und SVG, direkt im Browser ohne Upload.
Weiteres Tool ausprobieren
Passend zu diesem Tool ausgewähltDieses Tool kodiert ein Bild als Base64-Data-URI. Dabei wird die gesamte Bilddatei als Text dargestellt, der mit data:image/ beginnt und direkt in HTML oder CSS eingefügt werden kann, ohne dass der Browser eine separate Bilddatei laden muss. Unterstützt werden PNG, JPG, WebP, GIF und SVG. Zusätzlich zur Data-URI liefert das Tool fertige Schnipsel für ein img-Element und für eine CSS-Hintergrundeigenschaft. Weil Base64 die Datenmenge um etwa ein Drittel erhöht, eignet sich das Verfahren vor allem für kleine Icons und Grafiken.
So funktioniert das Tool
- 01Bild auswählenEine Bilddatei bis 10 MB in das Feld ziehen oder auswählen.
- 02Data-URI kopierenDie komplette Data-URI oder direkt den HTML- oder CSS-Schnipsel kopieren.
- 03In den Code einfügenDen kopierten Text dort einsetzen, wo sonst die Adresse der Bilddatei steht.
Wann ist das nützlich?
- Kleine Icons inline einbettenEin paar winzige Icons direkt im CSS sparen einzelne Anfragen an den Server.
- HTML-E-Mails und EinzeldateienEine HTML-Seite, die als einzelne Datei weitergegeben wird, enthält ihre Bilder dann gleich mit.
- Schnelle PrototypenFür ein Code-Beispiel oder eine Demo ist kein separater Bilderordner nötig.
Beispiele
- CSS-Hintergrundbackground-image: url(data:image/png;base64,iVBOR…); bettet ein kleines Muster direkt ins Stylesheet ein.
- img-Element im HTMLEin img-Element mit src="data:image/svg+xml;base64,…" zeigt ein Logo ohne eigene Bilddatei an.
- GrößenordnungAus einem Icon mit 3 KB wird eine Zeichenkette mit rund 4.000 Zeichen, aus einem Foto mit 300 KB über 400.000 Zeichen.
Tipps für ein besseres Ergebnis
- Vorher komprimierenJe kleiner die Ausgangsdatei, desto kürzer die Zeichenkette. Ein kurzer Durchgang durch den Bildkompressor lohnt sich.
- Caching bedenkenEingebettete Bilder werden mit jeder Seite neu geladen. Bilder, die auf vielen Seiten vorkommen, bleiben besser eigene Dateien.
Wie die Umwandlung funktioniert
Das Tool liest die Bilddatei als Bytefolge und kodiert sie mit Base64, einem Verfahren, das je 3 Byte in 4 druckbare Zeichen übersetzt. Vorangestellt wird der Medientyp, etwa data:image/png;base64, damit der Browser weiß, wie die Daten zu lesen sind. Das Bild selbst wird dabei nicht verändert oder neu komprimiert.
Warum die Zeichenkette größer ist als die Datei
Weil aus 3 Byte 4 Zeichen werden, wächst die Datenmenge um rund 33 %. Dazu kommt, dass eingebettete Bilder nicht separat im Browser-Cache landen. Für große Fotos und häufig wiederverwendete Bilder sind normale Bilddateien deshalb effizienter.
Lokale Verarbeitung
Gelesen und kodiert wird mit der FileReader-Schnittstelle des Browsers. Das Bild wird nicht hochgeladen und nicht gespeichert und ist nach dem Schließen des Tabs verschwunden.
Häufige Fragen
Was ist eine Base64-Data-URI?
Ein Bild als Textzeichenkette, die mit data:image/…;base64, beginnt. Sie lässt sich überall dort einsetzen, wo sonst eine Bildadresse steht.
Welche Formate werden unterstützt?
PNG, JPG, WebP, GIF und SVG. Die Data-URI behält das Format der Ausgangsdatei.
Wann sollte ich keine Data-URI verwenden?
Bei großen Bildern und bei Bildern, die auf vielen Seiten vorkommen, weil sie nicht separat gecacht werden und HTML oder CSS aufblähen.
Kann ich Base64 wieder in ein Bild zurückverwandeln?
Ja. Eine Data-URI in die Adressleiste des Browsers eingefügt zeigt das Bild an, und es lässt sich von dort speichern.
Werden meine Bilder hochgeladen?
Nein. Die Kodierung findet im Browser statt, das Bild bleibt auf dem Gerät.