Heften Sie hier Tools an. Sie werden in diesem Browser gespeichert.
Heften Sie ein Tool an, und sein Sticker landet hier.
Wandeln Sie ein Bild in eine Data-URI für CSS oder HTML um oder eine Data-URI zurück in eine Bilddatei.
Eine Data-URI trägt eine Datei direkt in der Adresse: data:image/png;base64,iVBORw0KGgo…. Nach data: folgt der Medientyp, dann eine optionale Kennung ;base64, die angibt, wie der Inhalt kodiert ist, und nach einem Komma schließlich der Inhalt. Überall, wo ein Browser eine Bild-URL akzeptiert, etwa in src in HTML oder in url() in CSS, akzeptiert er auch eine Data-URI und zeigt das Bild ohne weitere Anfrage an. Das Format ist in RFC 2397 definiert.
Base64 schreibt je 3 Bytes als 4 Zeichen, das kodierte Bild ist also etwa 33 % größer als die Datei. Ein eingebettetes Bild ist außerdem an das Dokument gebunden, das es enthält: Der Browser kann es nicht separat cachen, und es wird mit jeder Seite und jedem Stylesheet, die es wiederholen, erneut übertragen.
Data-URIs eignen sich deshalb gut für wenige kleine Bilder, etwa ein Icon von ein oder zwei Kilobyte oder einen Platzhalter, und schlecht für Fotos. Das Tool warnt Sie, sobald das Ergebnis etwa 10 KB überschreitet.
Eine SVG-Datei ist Text und lässt sich daher als Text in eine Data-URI schreiben: data:image/svg+xml;charset=utf-8,…. Nur manche Zeichen müssen prozentkodiert werden: die, die die URL oder die umgebenden Anführungszeichen beenden würden, und die, die eine URL nicht unverändert transportieren kann. Ein nicht maskiertes #, wie es in Farbwerten häufig vorkommt, leitet das Fragment der URL ein und schneidet das Bild ab. Dieses Tool maskiert %, #, <, >, ", &, den Backslash, Leerraum und Steuerzeichen und schreibt Zeichen außerhalb von ASCII als UTF-8-Escapes. Dekodiert man das Ergebnis, erhält man denselben SVG-Text zurück. Die Textform wird angeboten, wenn die Datei gültiges UTF-8 ist.
Die URL-kodierte Form bleibt lesbar, und weil sie weiterhin reiner Text ist, komprimieren gzip und Brotli sie meist besser als Base64. Welche Form vor der Komprimierung kürzer ist, hängt von der Datei ab, deshalb zeigt das Tool beide Größen an.
Das Bild wird von Ihrem Browser gelesen und von JavaScript auf Ihrem Gerät kodiert. Die Gegenrichtung funktioniert genauso: Die eingefügte Data-URI wird in der Seite dekodiert und Ihnen als Datei angeboten. Weder das Bild noch die Data-URI werden hochgeladen.
Nein. Die Datei wird von Ihrem Browser gelesen und kodiert, und das Tool stellt damit keine Netzwerkanfrage. Das gilt ebenso für eine Data-URI, die Sie einfügen, um sie wieder in eine Datei umzuwandeln.
Base64 stellt je 3 Bytes der Datei mit 4 Textzeichen dar, was etwa 33 % hinzufügt. Der kurze Header davor, etwa data:image/png;base64, kommt mit ein paar weiteren Bytes dazu.
Wenn das Bild klein ist, etwa ein paar Kilobyte, und sofort beim Rendern der Seite gebraucht wird, sodass eine eingesparte Anfrage mehr zählt als das Caching. Größere Bilder und Bilder, die viele Seiten gemeinsam nutzen, werden besser als separate Dateien ausgeliefert.
Ja. Setzen Sie sie in CSS in url("…") oder in HTML in das src-Attribut eines img-Elements. Wenn die Website eine Content-Security-Policy sendet, muss diese data: als Bildquelle erlauben, in img-src oder in default-src, damit das Bild erscheint.