Bild in Base64 umwandeln — Data-URI und CSS
Konverter im Browser zwischen Bildern und Base64, Data-URIs sowie CSS- und HTML-Snippets
Verarbeitung im Browser · kein Hochladen
Bild zum Umwandeln in Base64 hier ablegen
Ein Bild, bis 5 MB. Base64 ist größer als die Datei selbst und eignet sich daher für kleine Icons und Logos. Das Bild verlässt Ihren Browser nicht.
Worum es geht
Dieses Tool schreibt die Bytes einer Bilddatei als Text aus Buchstaben, Ziffern und einigen Sonderzeichen. Dieser Text lässt sich als Data-URI wie data:image/png;base64,... direkt in HTML oder CSS einsetzen. Alles läuft in Ihrem Browser, und die umgekehrte Richtung – Base64 wieder in ein Bild verwandeln – finden Sie auf derselben Seite.
So funktioniert es
- Wählen Sie Bild → Base64 und ziehen Sie ein Bild hinein oder wählen Sie es aus: eine Datei, bis 5 MB.
- Unter der Vorschau sehen Sie die Originalgröße, die Größe des Base64-Textes, den Zuwachs und einen Hinweis zur Größe.
- Klicken Sie im gewünschten Feld (Data-URI, Nur Base64-Zeichenkette, CSS background-image oder HTML-img-Tag) auf Kopieren. Lange Werte werden nur am Anfang angezeigt, kopiert wird aber alles; alternativ können Sie eine Textdatei herunterladen.
- Für die Gegenrichtung wählen Sie Base64 → Bild und fügen Base64 oder eine Data-URI ein. Es erscheinen eine Vorschau und die Schaltfläche Bild herunterladen.
Technische Details
- Kodierung: Standard-Base64 (RFC 4648), 3 Bytes zu 4 Zeichen, mit
=auf ein Vielfaches von 4 aufgefüllt. Umgewandelt werden direkt die Bytes der Datei, keine Zeichenkette – daher lässt sich jedes Bild unverändert zurückgewinnen. - MIME-Typ: wird aus den ersten Bytes der Datei gelesen (JPEG, PNG, GIF, WebP, SVG und mehr) und hinter
data:gesetzt. Eine falsche Dateiendung spielt keine Rolle. - HTML-Tag: width und height werden ergänzt, wenn sich die Bildgröße auslesen lässt.
- Größenhinweis: bis 10 KB eignet sich zum Einbetten, über 50 KB sollte man es sich überlegen, über 500 KB besser hochladen und verlinken.
- Dekodierung: URL-sicheres Base64 (
-und_) und fehlende=-Auffüllung werden akzeptiert. Weicht der angegebene Typ vom echten Bild ab, wird der echte verwendet und Sie erhalten einen Hinweis. Data-URIs ohne;base64werden nicht gelesen.
Beispiel
| Eintrag | Wert |
|---|---|
| Original | Icon mit 2,1 KB |
| Base64-Text | etwa 2,8 KB (+33 %) |
| CSS | background-image: url("data:image/png;base64,..."); |
| HTML | <img src="data:image/png;base64,..." width="16" height="16" alt=""> |
Häufige Fragen
Wird mein Bild hochgeladen?
Nein. Das Lesen der Datei und die Base64-Kodierung passieren in Ihrem Browser. Auch der entstehende Text wird nirgends gespeichert.
Warum macht Base64 die Daten größer?
Base64 schreibt 3 Bytes als 4 Zeichen, der Text ist also etwa ein Drittel (33 %) größer als die Datei. Steckt er in HTML oder CSS, kann der Browser das Bild außerdem nicht separat cachen, sodass es bei jedem Seitenaufruf erneut geladen wird.
Ab welcher Bildgröße ist Base64 keine gute Idee mehr?
Eine feste Regel gibt es nicht, aber üblicherweise bettet man kleine Icons, Logos und Lade-Spinner um 10 KB ein und behält alles über etwa 50 KB als normale Datei. Das Tool teilt die Größen in bis 10 KB, bis 50 KB, bis 500 KB und größer ein und zeigt Ihnen, in welche Gruppe Ihr Bild fällt. Große Bilder lädt man besser hoch und verlinkt sie.
Wofür sind Data-URIs nützlich?
Im src eines HTML-img-Tags, in url() bei CSS background-image, in einer E-Mail-Signatur, einer Markdown-Datei oder einer HTML-Seite als Einzeldatei, bei der das Bild mit dem Dokument reisen soll. Eine zusätzliche Bilddatei ist nicht nötig, allerdings blockieren manche E-Mail-Programme Bilder als Data-URI.
Beim Dekodieren heißt es, meine Daten seien ungültig.
Das Data-URI-Präfix ist optional, Leerzeichen und Zeilenumbrüche werden ignoriert, und Sie können ein ganzes CSS- oder HTML-Snippet einfügen – die enthaltene Data-URI wird automatisch gefunden. Klappt es trotzdem nicht, ist der Text vermutlich abgeschnitten oder enthält fremde Zeichen. Daten, die kein Bild sind, werden abgelehnt.
Was ist mit Bildern über 5 MB?
Mehrere Megabyte Base64 bremsen den Browser und lassen sich kaum irgendwo einfügen, daher wird ein Bild bis 5 MB angenommen. Verkleinern Sie größere vorher mit der Bildkomprimierung oder dem Bildgrößen-Tool.
