Bild in Base64 umwandeln

So wandelst du ein Bild in Base64 um

1. Ziehe ein Bild auf das Feld oben oder klicke auf Bild auswählen. PNG-, JPG-, GIF-, WebP-, SVG-, AVIF-, ICO- und BMP-Dateien funktionieren.
2. Das Werkzeug zeigt eine Vorschau, die Größe des Bildes und die Länge des Base64-Textes an.
3. Wähle über die Reiter das gewünschte Format: Data-URL (der vollständige Text data:image/…;base64,…), Base64 (nur der kodierte Teil), HTML <img>, CSS (eine Zeile background-image) oder Markdown.
4. Gib für die HTML- und Markdown-Schnipsel einen Alternativtext ein, der das Bild beschreibt, und lass Breite und Höhe im HTML ergänzen eingeschaltet, damit die Seite beim Laden nicht springt.
5. Klicke auf Kopieren und füge den Code dort ein, wo du ihn brauchst. Langer Text wird im Feld gekürzt, damit die Seite schnell bleibt, aber „Kopieren“ kopiert immer den vollständigen Text.

Alles passiert in deinem Browser. Das Bild wird nie hochgeladen, es gibt keine Anmeldung, und die Originaldatei wird nicht verändert.

Was ein Base64-Bild ist

Base64 ist eine Art, beliebige Binärdaten nur mit 64 sicheren Textzeichen zu schreiben: den Buchstaben, den Ziffern, Plus und Schrägstrich. Je 3 Bytes der Datei werden zu 4 Zeichen, weshalb der Text etwa ein Drittel länger ist als die Datei. Eine Data-URL setzt diesen Text hinter einen kurzen Kopf, data:image/png;base64,, der dem Browser den Typ der Datei und die Kodierung verrät. Browser behandeln sie wie jede andere Bildadresse, sie lässt sich also in einem<img src>-Attribut, in CSS-url() und in Markdown-Bildern verwenden.

Bei der Umwandlung wird nichts neu komprimiert. Die Bytes deiner Datei werden genau so kodiert, wie sie sind, das Dekodieren des Textes liefert also ein identisches Bild zurück.

Wann sich ein eingebettetes Bild lohnt

• Kleine Icons und Logos von wenigen Kilobyte, bei denen es sich lohnt, eine Anfrage zu sparen.
• Seiten in einer einzigen Datei wie ein gespeicherter Bericht, eine Code-Demo oder eine HTML-Datei, die du jemandem schickst und die ohne weitere Dateien funktionieren muss.
• CSS- und JavaScript-Bündel, die einen winzigen Platzhalter oder ein Hintergrundmuster brauchen.
• Testdaten und Dokumentation, bei denen ein kurzes Textbeispiel einfacher ist als eine Datei.

Verzichte bei Fotos und großen Bildern darauf: Der Text ist ein Drittel größer als die Datei, macht das Laden und Verarbeiten von HTML oder CSS langsamer, und der Browser kann das Bild nicht getrennt von der Seite zwischenspeichern. Viele E-Mail-Programme, darunter Gmail, zeigen Data-URL-Bilder außerdem nicht an. Nutzt deine Website eine Content Security Policy, muss data: in img-src erlaubt sein.

Beispiel

Du hast ein PNG-Icon mit 3.000 Bytes und 40×20 Pixeln und willst es in einer einzelnen HTML-Datei in einem Button verwenden. Ziehe es auf das Werkzeug: Der Base64-Text hat 4.000 Zeichen, 33 Prozent mehr als die Datei, denn 3.000 ÷ 3 × 4 = 4.000. Gib auf dem Reiter HTML den Alternativtext Download ein und kopiere das Ergebnis, das so aussieht:

<img src="data:image/png;base64,iVBORw0KGgo…" alt="Download" width="40" height="20">

Füge es in den Button ein, und das Icon ist Teil der Seite, ohne zweite Datei, die du hosten musst. Für dasselbe Icon als CSS-Hintergrund nutze den Reiter CSS und füge background-image: url("data:…"); in die Regel ein.

Tipps und häufige Probleme

• SVG-Bilder. Sie sind schon Text, daher ist auch eine kleinere SVG-Data-URL ohne Base64 möglich (mit URL-Kodierung der Sonderzeichen), aber die Base64-Variante funktioniert überall und ist die einfachste.
• Verkleinere das Bild zuerst. Ist der Base64-Text riesig, komprimiere das Bild oder ändere seine Größe vor dem Umwandeln.
• Prüfe den Typ. Der Anfang der Data-URL muss den richtigen Bildtyp nennen; dieses Werkzeug setzt ihn anhand deiner Datei.
• Zeilenumbrüche. Eine Data-URL muss eine einzige Zeile sein. Kopiere sie unverändert und füge keine Leerzeichen oder Umbrüche ein.
• Barrierefreiheit. Gib immer einen sinnvollen Alternativtext an, oder einen leeren bei rein dekorativen Bildern.

Häufige Fragen