Techniken | Tools

Grafiken ohne zusätzlichen http Request mit Data URI / base64

Für Grafiken in hoher Qualität und Skalierbarkeit sind Vektorgrafiken die erste Wahl. Mit Software wie beispielsweise Adobe Illustrator oder Inkscape lassen sich diese erstellen und z.B. im SVG Format abspeichern.

Diese lassen sich im Base64 Format encodieren. Damit wird das Bild in einer kryptischen Data-URI beschrieben. Diese kann dann in <img> Elementen oder im CSS Code verwendet werden. Das Bild wird dadurch zwar ca. 30% größer, aber es werden 3 HTTP Requests gespart und die Ladezeit wird mehr als halbiert. (Quelle: SelfHTML)

Es gibt diverse Programme um SVG Grafiken in Data-URI’s umzuwandeln. z.B. http://b64.io/ Dort ladet ihr einfach die Grafik hoch. Ich habe eine Stock SVG Grafik genommen und diese hochgeladen.

Dies ist ein relativ umfangreiches SVG. Im Original hat es bereits knapp 95 KB. Als oben gezeigte Data-URI hat es knapp 128 KB. Dennoch verringert sich die Ladezeit.

0 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

17 − 7 =