VoriTools

Ein Bild als Base64-Daten-URL kodieren

Wählen Sie ein Bild, um seine vorhandenen Bytes zu kodieren. Base64 stellt Daten als Text dar, komprimiert sie nicht und erhöht meist die Datenmenge.

Läuft lokal in deinem Browser

So wird aus einer Bilddatei eine Base64-Daten-URL

Das Werkzeug arbeitet in beide Richtungen: Wählen Sie ein Bild, und die Bytes der Datei kommen als data:image/…;base64,…-URL zurück; oder fügen Sie eine solche URL (oder reine Base64-Daten) ein, und die Seite zeigt, was darin steckt.

Alles läuft in diesem Tab mit dem FileReader und dem Bilddecoder des Browsers; die Datei wird nicht hochgeladen. Komprimieren, Verkleinern oder Entfernen von Metadaten findet hier nicht statt — dafür braucht es einen Bildeditor.

  1. Auf Bild auswählen klicken und eine Datei aussuchen. Das Feld füllt sich mit einer data:image/…;base64,…-URL, die mit dem erkannten Medientyp beginnt, und die Vorschau darunter zeigt das Bild.
  2. Auf Kopieren klicken, um die vollständige Daten-URL in CSS (background-image:url("data:…")), HTML (<img src="data:…">) oder eine JSON-Nutzlast zu übernehmen.
  3. Um Erhaltenes zu prüfen, die Daten-URL oder die reine Base64-Nutzlast einfügen und auf Vorschau anzeigen klicken. Die Seite liest die führenden Bytes (PNG, JPEG, GIF, WebP, BMP, ICO oder SVG), ergänzt den fehlenden Präfix und zeichnet das Bild.
  4. Auf In ein img-Tag einfassen klicken, wenn das Feld statt der reinen URL ein fertiges <img src="…" alt="…" />-Element enthalten soll.
  5. Auf Leeren klicken, um Feld, Vorschau und Dateiauswahl für das nächste Bild zurückzusetzen. Eine abgeschnittene, keine Base64- oder keine Bildnutzlast sagt das, statt ein kaputtes Bild zu hinterlassen.

Was Base64 verändert — und was es nicht löst

Was Base64 mit einem Bild macht

Base64 bildet je drei Bytes auf vier druckbare Zeichen ab, sodass dieselben Bytes Textkanäle überstehen, die Binärdaten beschädigen oder abschneiden würden: HTML, CSS, JSON, XML oder einen E-Mail-Text. Komprimiert wird nichts — der kodierte Text ist rund ein Drittel länger als die Datei — und der Browser dekodiert die Daten-URL beim Seitenaufbau, nie als eigene Datei aus dem Cache.

Verschlüsselung ist es ebenso wenig: Wer die Seite oder die E-Mail hat, kann die Nutzlast mit jedem Base64-Decoder zurück in die Originalbytes verwandeln. Eine Daten-URL darf deshalb nichts enthalten, was Sie nicht veröffentlichen würden.

Wann sich eine Daten-URL lohnt

Ein kleines Logo, ein Aufzählungssymbol oder eine Hintergrundtextur, die sonst pro Seite eine HTTP-Anfrage kostet, reist stattdessen im Stylesheet mit. Das spart einen Round-Trip und stellt sicher, dass das Bild vor dem ersten Bildaufbau da ist.

Mit der Dateigröße wachsen die Nachteile: das Markup wird unlesbar, das HTML lässt sich schlechter komprimieren, und kein Browser kann das Bild ohne die Seite zwischenspeichern. Daten-URLs gehören zu Ressourcen deutlich unter 10 KB; Fotos, Sprite-Grafiken und alles, was auf mehreren Seiten verwendet wird, bleiben eigene Dateien.

Eine fremde Nutzlast prüfen

Eingefügtes Base64 kommt meist ohne Medientyp. Diese Seite liest die führenden Bytes der dekodierten Daten — die Signatur von PNG, JPEG, GIF, WebP, BMP oder ICO oder die <svg-Wurzel eines SVG-Dokuments — und schreibt den passenden data:image/…;base64,-Präfix davor, sodass aus einer reinen Nutzlast kein kaputtes Bild mehr wird.

Passen die Bytes zu keinem bekannten Format, stimmen Base64-Alphabet oder Auffüllung nicht, oder kann der Browser die dekodierten Daten nicht zeichnen, nennt die Statuszeile den jeweiligen Fall. Testen Sie zuerst eine kleine Datei mit bekanntem Bild und dekodieren Sie alles, was in ein Produkt geht, zusätzlich mit einem zweiten Werkzeug.

Zuletzt verwendet: