Bild zu Base64

Ein Data-URI ist eine Zeichenkette, die den Inhalt einer Datei — hier ein Bild — direkt in den Code einbettet, ohne eine eigene Datei. Die Form ist data:image/png;base64,XXXX, wobei XXXX das Bild in Base64 ist. Man fügt sie in das Attribut src eines img-Tags oder in eine CSS-Regel background-image ein.

Base64 stellt je 3 Byte Binärdaten mit 4 Textzeichen dar und macht die Datei dadurch rund 33 % größer. Deshalb lohnt sich das Einbetten nur bei kleinen Bildern wie Symbolen und Logos: Es spart Anfragen, aber bei großen Bildern bläht es HTML und CSS auf.

Nein. Die Umwandlung läuft vollständig im Browser über die FileReader-Schnittstelle von JavaScript: Das Bild verlässt Ihr Gerät nicht und geht an keinen Server. Das macht das Werkzeug privat und sehr schnell, und einmal geladen funktioniert es sogar ohne Verbindung.

Es ist eine Zeichenkette, die den Inhalt der Datei in sich trägt, in der Form data, Doppelpunkt, Dateityp, base64 und dann die Daten. Man fügt sie dort ein, wo sonst die Adresse eines Bildes stünde, und braucht keine eigene Datei.

Weil Base64 je drei Byte mit vier Textzeichen darstellt, das Gewicht wächst also um rund ein Drittel. Es lohnt sich nur bei kleinen Symbolen und Logos, wo man eine Anfrage spart.

Nein, der Browser wandelt es mit dem FileReader von JavaScript um, die Datei verlässt das Gerät also nicht. Einmal geöffnet, arbeitet das Werkzeug auch ohne Verbindung weiter.