Bild zu Base64
Als Data-URI kopieren, fertig für CSS oder HTML
Bild
Ergebnis
Noch kein Bild
Ziehen Sie ein Bild hierher, dann erscheint die Base64-Ausgabe hier.
Base64 macht die Daten rund 33% größer. Nutzen Sie es nur für kleine Bilder.
Ein kleines Bild als Data-URI einzubetten spart eine Netzwerkanfrage, was bei Icons zählt, die auf jeder Seite vorkommen. Ab ein paar Kilobyte lohnt es sich nicht mehr, denn Base64 macht die Daten rund ein Drittel größer und sie lassen sich nicht separat zwischenspeichern.
So funktioniert es
- 1 Ziehen Sie ein Bild hierher — kleine Icons eignen sich am besten.
- 2 Wählen Sie, ob Sie die vollständige Data-URI oder nur die Base64-Daten möchten.
- 3 Kopieren Sie das Ergebnis und fügen Sie es in Ihr CSS oder HTML ein.
Häufige Fragen
Wann sollte ich ein Bild einbetten?
Unter etwa 4 KB und nur bei Bildern, die auf nahezu jeder Seite verwendet werden. Darüber wiegen der Größenaufschlag und der Verlust der eigenen Zwischenspeicherung die eingesparte Anfrage auf.
Warum wird die Datei größer?
Base64 stellt drei Byte Binärdaten als vier ASCII-Zeichen dar, ein fester Zuwachs von 33%, plus ein wenig für das URI-Präfix. Das ist der Preis dafür, Binärdaten in einer Textdatei unterzubringen.
Wird eine Data-URI zwischengespeichert?
Nur als Teil der Datei, die sie enthält. Ändern Sie ein eingebettetes Icon, muss das ganze Stylesheet erneut geladen werden — genau deshalb geht das Einbetten großer Bilder nach hinten los.