Sie befinden sich hier:
» 
» 
02.05.2012

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

<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAF....." />

PNG als Bild

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdYAAAC....." />

PNG als Hintergrund

background: url("data:image/png;base64,iVBORw0KGgoAAAANSU.....") no-repeat scroll 0 0 transparent;

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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

41