Bild in Base64 umwandeln
Verwandle ein Bild in eine Base64-Zeichenkette zum Einfügen in Code.
Base64-Text ist etwa 37 % größer als die Originaldatei. Gut geeignet für kleine Icons, nicht für ganze Fotos.
Läuft in deinem Browser. Deine Dateien verlassen nie dein Gerät.
- Ausgabe als Data-URL, CSS und HTML
- Funktioniert mit jedem Bildtyp
- Nichts wird hochgeladen
So wandelst du ein Bild in Base64 um
- Lege ein Bild hier ab, oder tippe auf Dateien auswählen.
- Kopiere die Data-URL, das rohe Base64 oder einen fertigen CSS- oder HTML-Schnipsel.
- Füge es in deinen Code ein.
Wie die Kodierung funktioniert
Base64 wandelt jeweils 3 Bytes des Bilds in 4 Textzeichen um, mit den 64 Zeichen A bis Z, a bis z, 0 bis 9, plus und Schrägstrich, dem Standardalphabet aus RFC 4648.
Eine Data-URL ist dieser Text mit einem kurzen Präfix, wie data:image/png;base64, damit ein Browser oder eine App ohne separate Datei weiß, womit sie es zu tun hat.
| Originaldatei | Base64-Text (etwa 37 % größer) |
|---|---|
| 5-KB-Icon | Etwa 6,9 KB |
| 20-KB-Logo | Etwa 27 KB |
| 100-KB-Foto | Etwa 137 KB |
Dieser Mehraufwand ist der Grund, warum Data-URLs am besten für kleine Grafiken funktionieren, nicht für ganze Fotos.
Wo Data-URLs genutzt werden
- In CSS, innerhalb von background-image, damit ein kleines Icon mit dem Stylesheet statt mit einer separaten Anfrage lädt.
- In HTML, innerhalb eines img-src-Attributs oder eingebetteten SVG-Markups.
- In JSON-API-Antworten und Datenbankfeldern, die ein Bild als Text speichern.
- In E-Mail-HTML, da manche E-Mail-Programme verlinkte Bilder blockieren, eingebettete Daten aber erlauben.
Wann eine normale Datei besser ist
Data-URLs werden nicht separat von der Seite gecacht, die sie enthält, ein auf zehn Seiten genutztes Foto wird also zehnmal statt einmal heruntergeladen. Für alles, was größer als ein kleines Icon ist, lädt eine normale Bilddatei mit Browser-Caching schneller.
Häufige Fragen zu Bild in Base64
Was ist eine Base64-Data-URL?
Es sind die Bytes eines Bilds, als Text geschrieben, du kannst ein Bild also direkt in HTML, CSS oder JSON einfügen, ohne eine separate Datei.
Macht Base64 die Datei größer?
Ja, um etwa 37 Prozent, da die Kodierung jeweils 3 Bytes des Bilds in 4 Textzeichen umwandelt.
Wann sollte ich eine Data-URL statt einer Datei nutzen?
Für kleine Icons und einfache Grafiken, wenn das Sparen einer Netzwerkanfrage wichtiger ist als die Seitengröße. Für Fotos behalte eine normale Bilddatei.
Wird mein Bild irgendwohin hochgeladen?
Nein. Die Kodierung läuft in deinem Browser, das Bild verlässt dein Gerät also nie.
Ändert die Umwandlung in Base64 die Bildqualität?
Nein. Die Pixeldaten werden nicht angerührt, nur als Text neu geschrieben, das Zurückdekodieren ergibt also exakt die ursprünglichen Bytes.
Gibt es eine maximale Größe für eine Data-URL?
Browser erzwingen kein festes Limit, aber eine lange Data-URL lässt sich nicht separat cachen und verlangsamt das Parsen, beschränke sie also auf kleine Icons und Grafiken.
Unterstützt jeder Browser Data-URLs?
Ja. Data-URLs funktionieren in jedem großen Browser seit Internet Explorer 8, einschließlich aller aktuellen mobilen Browser.
Kann ich das für ein Favicon nutzen?
Ein kleines Favicon lässt sich als Data-URL im HTML-head einbetten, eine normale favicon.ico-Datei plus die PNG-Größen ist aber immer noch die üblichere Lösung.