Google Page Speed – Bildoptimierung (Teil 3)

Teil 3 unserer Serie – Page Speed Optimierung:
Nachdem wir im ersten Teil unserer Page-Speed Optimierungsreihe auf die wichtigsten Punkte der Optimierung durch CSS und im zweiten Teil auf das Zusammenspiel zwischen CSS und Bildern eingegangen sind, möchten wir nun einen der wohl wichtigsten Punkte in der Optimierung der Ladezeit von Websites näher betrachten. Überdies zeigt die Erfahrung, dass auf die Optimierung von Bildern durch die schneller werdende Übertragungsgeschwindigkeit des Internets immer weniger geachtet wird. Die richtige Verwendung von Bildern stellt zwar den trivialsten Punkt dieser Optimierungsreihe dar, aber gerade hier kann die Ladezeit von Websites zumeist enorm gesteigert werden.

Google schlägt bei der Verwendung von Grafiken in Hinsicht auf die Optimierung der Ladezeit die folgenden Punkte vor:

„Geben Sie die Bildgröße an“

Bei der Verwendung von Bildern sollte man auf die Angabe der Attribute „width“ und „height“ achten und entsprechend angeben. Hintergrund hierbei ist, dass der Browser erst mit dem Aufbau einer Seite beginnen kann, wenn die Bildmaße ermittelt worden sind. Macht man daher keine Angaben zu der Höhe und Breite muss das Bild zuerst geladen bzw. ausgewertet werden, bevor der Browser mit dem Aufbau der Seite beginnen kann. Im Umkehrschluss bedeutet dieses, dass unter Verwendung dieser Attribute der Platz für das Bild bereits reserviert wird und Browser direkt mit der Darstellung der Seite fortfahren kann.

Die Maßangaben eines Bildes können direkt über den Image-Tag angegeben werden, oder über eine Klasse bzw. ID in einer externen CSS-Datei definiert werden.

Definition der Bildmaße im Image-Tag:

[html] <img src=“ image.png“ alt=“image“ width=“200″ height=“100″ />
[/html]

Definition der Bildmaße in einer externen CSS-Datei:

[html] <img class=“img“ src=“image.png“ alt=“image“ />

.img {

width: 200px;
height: 100px;

}
[/html]

„Verwenden Sie skalierte Bilder“

Gerade in großen Shopsystemen sollten zumindest die Produktbilder über einheitliche Abmessungen verfügen, um eine ordentliche Darstellung der Website zu wahren. Daher werden Bilder oftmals automatisch per CSS oder JavaScript auf die passende Größe skaliert, um den Websitebetreibern darüber hinaus den Umgang mit Bildern zu erleichtern. Diese Begebenheit bringt zwar eine Zeitersparnis mit sich beziehungsweise werden fehlerhafte Darstellungen dadurch vermieden, allerdings müssen unnötige Bytes geladen werden und die Ladezeit der Website erhöht sich daher unnötig.

Auch wenn die Möglichkeit einer automatischen Skalierung besteht, sollte man daher trotzdem vor der Verwendung die Größe der Bilder passend bereitstellen.

„Optimieren Sie Ihre Bilder“

Schöne und qualitativ hochwertige Bilder sind eine Bereicherung für jede Website. Gerade Webshopbetreiber achten sehr auf eine für den Kunden ideale Produktansicht. Hierbei wird fälschlicherweise angenommen, dass sich bei einer weiteren Bearbeitung der Produktbilder die Bildqualität verringert. Viele Bildaufnahmegeräte und die entsprechenden Programme in diesem Bereich speichern aber zusätzliche Kommentare in den Bildern und verwenden zu viele Farben, die für den Gebrauch im Web nicht benötigt werden.

Google empfiehlt für eine verlustfreie Kompression von Bildern die folgenden Programme:

Verwenden Sie für JPEG-Dateien jpegtran or jpegoptim (nur für Linux verfügbar)
Verwenden Sie für PNG-Dateien OptiPNG or PNGOUT
Verwenden Sie die in Page Speed integrierte Kompressionswerkzeug für JPEGs und PNGs

Die Bedienung der im ersten und zweiten Punkt aufgezählten Kompressionswerkzeuge ist allerdings eher etwas für fortgeschrittene Anwender.

Das in Page Speed enthaltene Kompressionswerkzeug ist dagegen leicht zu bedienen, weist eine hohe Kompression auf und kann für JPEGs und PNGs eingesetzt werden. Nach der Analyse der Website durch Page Speed kann man das optimierte Bild lokal auf dem Rechner speichern und einfach mit der Bilddatei auf dem Server austauschen.

Darüber hinaus ist der Typ eines Bildes überaus wichtig und kann eine drastische Auswirkungen auf die Dateigröße haben. Google hat in Hinsicht auf eine geeignete Verwendung von Grafikformaten die folgenden Richtlinien herausgegeben:

PNGs sind GIFs gegenüber fast immer überlegen und sind in der Regel die beste Wahl für die Verwendung im Web. Google geht darauf ein, dass die aktuellen Browser alle PNGs einschließlich der Transparenz darstellen können. Darüber hinaus wird darauf hingewiesen, dass man zum Erzeugen und zum Konvertieren von PNGs wunderbar GIMP benutzen kann.
Verwenden Sie GIFs für sehr kleine oder einfache Grafiken (z.B. bis zu 10×10 Pixel, oder einer Farbpalette von weniger als 3 Farben) und für Animationen.
Verwenden Sie JPGs für alle fotografisch aufgenommene Bilder.
Verwenden Sie keine BMPs oder TIFFs.

„Fazit & Tipp:“

Das Thema der Bildoptimierung ist überaus umfangreich und man sollte schon etwas Zeit investieren, um die Zusammenhänge zu verstehen und umsetzen zu können. Hier lohnt sich das Einlesen in das Themengebiet aber auf jeden Fall in Bezug auf die Optimierung der Ladezeit einer Website.

Möchte man aber schnelle Erfolge erzielen bzw. Bilder effizient ohne Darstellungsverluste minimieren, ist das in Page Speed enthaltene Kompressionswerkzeug ideal für eine erste Bearbeitung.

Verfasst von Christian Grzeschik