Google Page Speed – Bildoptimierung (Teil 3)

Wir nutzen Cookies & das Facebook Besucheraktions-Pixel für statistische Zwecke. Einverständnis bestätigen: OK

Mehr Infos: Datenschutzbestimmungen

Google Adwords Premier Google Partner Badge
 

Google Page Speed – Bildoptimierung (Teil 3)

page speedTeil 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

Hat dir dieser Beitrag gefallen?

Über den Autor

Christian
Christian ist Senior Consultant SEO/SEA bei der Online Marketing Solutions AG und ist zuständig für die ganzheitliche Projekt- sowie Strategieplanung bis hin zur technischen Umsetzung (On- sowie Offsite). Er betreut Key Account-Kunden der OMSAG aus unterschiedlichsten Branchen bzw. Marktsegmenten und kann dabei auf die Erfahrung von über 50 erfolgreichen Projekten zurückgreifen. Außerdem ist er Google AdWords Professional und verfügt über das Google Analytics Individual Zertifikat

Hinterlasse einen Kommentar

  • AdminIsTraitor 11.04.2011, 7:39 Uhr

    Die beiden Tools optipng und pngout sind durchaus interessant, schaffen sie es doch, die Kompressionsstufe 9 von IrfanView noch zu stärken. Allerdings schafft optipng bei einem Screenshot von 222 KB “nur” 4 KB Reduktion auf 218 KB. Solange es keine GUI gibt, die die hakelige Bedieung des Kommandozeilen-Tools vereinfacht, würde ich empfehlen, die Bilder per IrfanView zu speichern, da dieses Programm auch Stapelverarbeitung beherrscht. Darüber hinaus ist es kostenlos (im Gegensatz beispielsweise zu pngout). 🙂