So erhöhen Sie den Pagespeed Ihrer Website – Teil 2: Optimieren von Bildern und grafischen Elementen

So erhöhen Sie den Pagespeed Ihrer Website – Teil 2: Optimieren von Bildern und grafischen Elementen
© 3dkombinat – Fotolia.com

Die Ladegeschwindigkeit einer Webseite hängt von mehreren Faktoren ab. Insbesondere Bilder und grafische Elemente benötigen Bandbreite und beeinflussen den Pagespeed maßgeblich.

Nicht selten sehen wir, dass Bilddateien, die nur klein auf einer Webseite erscheinen, in einer sehr hohen Auflösung auf dem Webserver hinterlegt sind. Hierdurch wird unnötig Bandbreite vergeudet und die Ladezeit der Seite ist höher, als sie sein müsste. Zwar macht es Sinn, bestimmte Grafiken in erhöhter Auflösung zu hinterlegen, damit sie auch bei hohen DPI-Auflösungen oder 2-fachem Zoom noch scharf dargestellt werden.

Wenn ein Bild allerdings lediglich mit 120x120 Pixel auf der Webseite ausgegeben wird, die Datei jedoch in einer Auflösung von 2400x2400 Pixel auf dem Server hinterlegt ist, ist definitiv der Zeitpunkt für eine Optimierung gekommen. Eine Auflösung von 240x240 oder 360x360 Pixel reichen in diesem Fall aus, damit es auch bei vergrößerter Darstellung noch eine gute Figur macht.

Auch auf die Wahl des Dateiformats kommt es an

Auch sollte abgewogen werden, welches Dateiformat für welche Art von Grafik am besten geeignet ist. Hier gibt es große Unterschiede, insbesondere was die Art der Kompression anbelangt. Unterschieden wird zwischen verlustfreier und verlustbehafteter Komprimierung. Vertreter für erstere sind beispielsweise das GIF- und PNG-Dateiformat. Die Qualität von Bildern, die in diesen Formaten gespeichert werden, bleibt unverändert. So kann es sinnvoll sein, das Firmenlogo oder Designelemente als GIF zu speichern, sofern 256 Farben ausreichend sind. Daneben bietet sich das PNG-Format an, das vor Jahren als Alternative zum GIF-Format geschaffen wurde, weil für die darin verwendete, patentierte LZW-Kompression damals Nutzungsgebühren verlangt wurden. Vor zehn Jahren ist dieses Patent jedoch abgelaufen. PNG erlaubt gegenüber GIF sogar die Verwendung von 16 Mio. Farben in einem Bild.

Für Fotos, wie Produktbilder oder Bilder aus dem Unternehmensalltag, eignet sich hingegen das JPEG-Format. Hiermit lässt sich auch bei großen Bildern eine geringe Dateigröße erzielen. Lediglich wenn man ein JPEG-Bild stark vergrößert und genau hinschaut, werden einem die charakteristischen JPEG-Artefakte auffallen, die bei normaler Betrachtung jedoch für das menschliche Auge nicht bzw. kaum wahrnehmbar sind.

Bei diesem Dateiformat lässt sich über die optimale Einstellung der Qualitätsstufe Bandbreite einsparen. So weisen Bilder, deren Qualität auf 80 bis 85 % reduziert wird, für das menschliche Auge kaum wahrnehmbare Qualitätseinbußen auf, während die Dateigröße aber gleichzeitig spürbar reduziert wird – und somit auch die Ladedauer.

Für gängige Content-Management-Systeme, wie z. B. WordPress, sind Plug-Ins erhältlich, die alle Bilder des Internetauftritts automatisch optimieren und die oben genannten Einstellungen automatisch vornehmen.

Fazit

Die Optimierung von Bildern und grafischen Elementen ist einer der stärksten Hebel bei der Pagespeed-Optimierung und macht sich im Vorher-/ Nachher-Vergleich häufig besonders deutlich bemerkbar.


Jochen Moschko

 
Jochen Moschko
SEO & QS-Manager
Jochen Moschko arbeitet in den Bereichen Suchmaschinenoptimierung und Qualitätssicherung bei der FAIRRANK GmbH.