Ladezeit: So optimierst Du Deine Bilder

Bilder beeinflussen die Ladezeit einer Webseite maßgeblich. Wenn man die Bildgröße oder die Bildqualität reduziert, wird das Laden der Seite beschleunigt. Das klingt einfach, ist es aber nicht. Warum nicht?

• Deine Bilder sollten für Deine Besucher ansehnlich sein. Eine zu geringe Bildqualität lässt sie nicht mehr ansprechend wirken.
• Immer mehr Nutzer verwenden hohe DPI-Auflösungen. Damit Bilder auch bei diesen scharf aussehen, müssen sie in einer höheren Auflösung bereitgestellt werden.

Bezüglich der Kompression von Bildern gibt es zwei Unterschiede: verlustfreie und verlustbehaftete Kompression. Ein bekanntes Dateiformat mit verlustfreier Kompression ist PNG. Hier verringert sich die Bildqualität nicht, was gleichzeitig aber meistens zu einer höheren Dateigröße führt. Wenn in einem Bild nur wenige Farben verwendet werden, bietet es sich an, die Farbtiefe von 16,7 Millionen Farben auf 256 Farben zu reduzieren – beispielsweise, wenn es sich um ein Logo handelt. [caption id="attachment_22418" align="alignnone" width="300"] PNG-Bilder in Paint.NET speichern[/caption] Ein bekanntes Beispiel für verlustbehaftete Kompression ist das JPEG-Format. Hier sind wesentlich geringere Dateigrößen möglich – allerdings unter Reduzierung der Bildqualität. Aus Erfahrung erzielt man das beste Verhältnis aus Dateigröße und Bildqualität bei einer Qualitätsstufe von 80-85 %. [caption id="attachment_22417" align="alignnone" width="300"] JPEG-Bilder in Paint.NET speichern[/caption] Wenn man seine Bilder allerdings auch für höhere DPI-Auflösungen optimieren möchte, nimmt die Dateigröße rasant zu. Hier sollte man einen gesunden Mittelweg wählen. Wer auf seinem Endgerät eine 2-fache Vergrößerung eingestellt hat, für den muss die Auflösung des Bildes entsprechend höher sein, damit das Bild die volle Bildschärfe entfaltet. Leider führt eine Bildvergrößerung um 100 % direkt zu der 4-fachen Datenmenge und deshalb auch zu einer entsprechend höheren Dateigröße (bei JPEG ist die Zunahme allerdings nicht linear, sondern fällt bei größeren Bildern im Verhältnis gesehen häufig etwas geringer aus). Eine höhere Dateigröße führt jedoch zu einer längeren Ladezeit und das ist aus Usability-Sicht schlecht. Aus diesem Grund sollte man testen und abwägen, ob eine mittlere Vergrößerung ebenfalls ausreichend ist. Wenn man die Bildgröße beispielsweise nur um 50 % statt um 100 % erhöht, wird das Bild auf hohen DPI-Auflösungen dennoch besser aussehen, als wenn man es gar nicht vergrößert.

Tipp: Oft lässt sich bei einer höheren Bildauflösung unter Verwendung des JPEG-Formats die Bildqualität noch etwas stärker reduzieren, ohne dass es optisch besonders auffällt.

Auf das Ranking bei Google kann sich eine hohe Ladezeit ebenfalls auswirken. Allerdings unterscheidet Google an dieser Stelle nur zwischen Seiten mit einer „normalen“ Ladegeschwindigkeit und Seiten, die „extrem“ langsam sind (siehe Hangout vom 14.11.2017, Position 12:31). Von daher sollten ein paar Prozent mehr Dateigröße noch kein Auslöser für ein schlechteres Ranking sein. Dennoch sollte man allein aus Usability-Gründen die Ladezeiten seiner Seiten so niedrig wie möglich halten. Verschiedene Auswertungen haben wenig überraschend ergeben, dass die Ladezeit direkt mit der Absprungrate zusammenhängt. Browser-Caching optimieren Doch die Auswahl des passenden Dateiformats und der optimalen Bildgröße ist noch nicht alles. Wenn Deine Website auf einem Apache-Server liegt, kannst Du die Ladezeit für wiederkehrende Besucher durch recht simple Anweisungen in der .htaccess-Datei weiter senken. Und zwar durch die Optimierung des Browser-Cachings. Die folgenden Anweisungen sorgen dafür, dass Deine JPEG-Bilder einen Monat lang im Browser-Cache Deiner Besucher gespeichert werden. Wenn ein Besucher Deine Website innerhalb eines Monats erneut besucht, werden die Grafiken nicht mehr von Deiner Website geladen, sondern direkt von der Festplatte des Besuchers – sofern dieser nicht zwischenzeitlich seinen Browser-Cache geleert hat: ExpiresActive On ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType [weitere Dateitypen…] Mit dem Google-Tool PageSpeed Insights kannst Du testen, wie sich die Ladezeit Deiner Seiten durch verschiedene Maßnahmen verändert. Möglicherweise wird Dir von diesem Tool empfohlen, Deine Bilder trotz bereits guter Kompressionsraten noch stärker zu komprimieren – oft wird einem suggeriert, dass man beispielsweise weitere 50 %, gemessen an der Dateigröße, einsparen könnte. Das ist häufig nicht realistisch, denn dann wäre die Bildqualität derart schlecht, dass die Bilder sich nicht mehr gut ansehen ließen.

Tipp zum Schluss: Durch das Auslesen der Bildschirmbreite hat man auch die Möglichkeit, Grafiken direkt in der passenden Größe an den Besucher auszuliefern. Viele Content-Management-Systeme machen das bereits automatisch.