Performancegewinn durch Inline Grafiken
Nachdem ich bereits die Möglichkeiten zur Reduzierung der http-Requests erläutert und über die Anwendung von CSS-Sprites geschrieben habe, möchte ich eine weitere Möglichkeit vorstellen, um die Performance zu steigern – die Verwendung von Inline Grafiken.
Nicht alle Grafiken lassen sich zu CSS-Sprites kombinieren. Meist bleibt eine überschaubare Anzahl von Grafiken übrig, die dann jeweils einzeln gelesen werden müssen, d.h. hierfür wäre jeweils ein eigener Request je Bild notwendig. Um dies zu umgehen, können die Grafiken auch direkt base-64 kodiert als Binärcode in die Webseite eingebettet werden. Diese Technik ist sowohl für „normale“ Grafiken, als auch für Hintergrundbilder anwendbar. Die üblichen Browser können alle mit Inline-Grafiken umgehen. Einzig beim Internet Explorer 6 gibt es mit Inline-PNG-Grafiken Probleme.
Erstellung von Inline-Grafiken
Zuerst muss die Grafik base-64 kodiert werden. Hierzu findet man im Internet relativ schnell einen entsprechenden Image-Konverter. Danach muss der erzeugte Code nur noch eingebettet werden.
Beispiele für die Einbettung von Inline-Grafiken
GIF als Bild
PNG als Bild
PNG als Hintergrund
Um endgültig entscheiden zu können, ob diese Technik in Ihrem konkreten Anwendungsfall sinnvoll nutzbar ist, hier noch eine Auflistung der Vor- und Nachteile.
Vorteile von Inline-Grafiken:
- Reduzierung der http-Requests
- Bilder sind fest mit der Seite verbunden (kein extra Link notwendig)
- so eingebundene Bilder müssen z.B. in HTML-Emails nicht separat nachgeladen werden, sondern sind sofort verfügbar
- ideal für dynamisch erzeugte Grafiken
- Herkunft ist nicht genau erkennbar (Filesystem oder Datenbank)
Nachteile von Inline-Grafiken:
- das zu übertragende Datenvolumen erhöht sich um ca. 30-40% je Bild. Deshalb nur für kleine Grafiken sinnvoll.
- die Übersichtlichkeit (Wartbarkeit) der Webseite leidet darunter
Fazit
Ich würde Inline-Grafiken nur für kleine „versprengte“ Grafiken empfehlen. Hier könnte es einen Performancegewinn durch die Einsparung von Requests geben. In allen anderen Fällen ist die Anwendung von CSS-Sprites und die Kombinationen von Scripten zur Einsparung von Requests sicherlich sinnvoller und zielführender.