In unserer aktuellen Reihe Bessere Performance für ein höheres Google Ranking gehen wir auf die einzelnen Faktoren des Google PageSpeed ein. Der Google PageSpeed gilt seit einigen Jahren als zusätzlicher Rankingfaktor. Alle Maßnahmen sorgen dafür, dass eine Webseite oder deren Ressourcen – Bilder, Style- und Scriptdateien, etc. – schneller ausgeliefert werden und somit die Webseite dem Benutzer schneller zur Verfügung gestellt wird.
Heute widmen wir uns einem ganz wichtigen Punkt, dem Bilder optimieren.
Inhaltsverzeichnis
Warum sollte ich meine Bilder optimieren?
Bilder können einen Großteil der Gesamtgröße deiner Webseite ausmachen. Damit die Bilder auf dem Browser deines Besuchers angezeigt werden können müssen sie vorher vom Webserver heruntergeladen werden. Je größer die Bilder (Dateigröße!) dabei sind, desto länger dauert die Übertragungszeit.
Bildgröße optimieren
Es geht in diesem Artikel nicht um die Bildgröße deiner Bilder. Natürlich solltest du auch kein Bild mit einer Größe von 2400 x 1200 Pixeln hochladen, wenn auf deiner Webseite nur eine Größe von 600 x 300 Pixeln benötigt wird.
Dateigröße optimieren
Für die verschiedenen Bildformate gibt es unterschiedliche Komprimierungsmethoden. Manche davon sind verlustfrei, einige wiederum sind verlustbehaftet. Bei einer verlustfreien Komprimierung gehen keinerlei Bildinformationen verloren. Das heißt: Das Bild sieht exakt so aus wie vorher. Die Dateigröße des Bildes hat sich allerdings verkleinert. Bei einer verlustbehafteten Komprimierung gehen physikalisch wirklich Bildinformationen verloren. Ob dies für das menschliche Auge wirklich sichtbare oder benötigte Informationen sind ist immer vom Anwenundgsfall abhängig. Bilder mit der Dateiendung .jpg können sehr oft problemlos verlustbehaftet komprimiert werden ohne, dass für den menschlichen Betrachter nennenswerte Unterschiede im Bild auftauchen.
Wie erkenne ich ob ich meine Bilder optimieren muss?
Der Google PageSpeed zeigt dir an ob die Bilder auf deiner Webseite verlustfrei komprimiert werden können oder nicht. Dafür nutze ich die Google Chrome Extension Google PageSpeed Insights. Diese ermöglicht mir direkt die komprimierten Bilder herunterzuladen und diese gegen meine eigenen einzutauschen.
Bilder mit Photoshop optimieren
Sinnvoll ist es bereits im Vorfeld die eigenen Bilder zu optimieren. Gerade Photoshop bringt dafür ein sehr mächtiges Werkzeug mit.
Auf diesem Photoshop Screenshot erkennt man die qualitativen Unterschiede bei Komprimierungen.
Auf dem Screenshot erkennt man gut, dass die Originaldatei 703 KB groß ist. Mit einer Qualitätseinschränkung von 70% ist das Bild schon nur noch 36,6 KB groß. Für das menschliche Auge sind so gut wie keine Unterschiede zu erkennen. Bei einer Qualität von 35 % konnte die Dateigröße nochmal um die Hälfte reduziert werden. Hier erkennt man nun deutlich, dass das Bild etwas unschärfer geworden ist.
Je nach Anwendungsfall kann man also seine Bilder bereits im Vorfeld mit Photoshop optimieren und dadurch an Dateigröße der Bilddateien sparen.
Plugins für Bilder optimieren nutzen
Für WordPress gibt es das Plugin Optimus. Dieses Plugin optimiert Bilder verlustfrei beim Hochladen in deine WordPress Mediathek.
Fazit
Bilder sollten immer optimiert werden. Ob du dies bereits vorher im Photoshop, beim Hochladen über deine WordPress Mediathek oder im Nachgang per Google Pagespeed tust, sei dir selbst überlassen.
Gerade aber bei Bildern lässt sich so eine Menge an Datenvolumen und Übertragungszeit sparen.
… tolle Zusammenfassung. Eine Ergänzung habe ich noch. Auch, wenn es nicht wirklich mit dem Speed zu tun hat. Wenn ihr schon an den Bildern arbeitet, dann setzt unbedingt gleich alt_tags sonst macht ihr euch doppelte Arbeit. grez
Hallo Michael,
bzgl. der Bilderoptimierung habe ich mal einen kurzen Artikel verfasst wie dies automatisiert auf der Komandozeile passieren kann. Die Bilder werden so zu den von Google geforderten 85% Qualität optimiert. Vielleicht ist das noch hilfreich für einige die hier den guten Artikel von Michael gelesen haben. Den Artikel über die automatisierte Optimierung von Bildern findet ihr hier https://www.antweb.de/blog/bilder-fuer-google-pagespeed-insights-richtig-optimieren/.
Grüße
Tim
Hallo Tim,
danke für Deinen Kommentar und hilfreichen Mehrwert. Wer viele Bilder automatisiert verarbeiten will und die dafür nötige Software hat, kann das gut gebrauchen.
Als Alternative kann ich auch nur den grandiosen Bildverkleinerer empfehlen.
Danke für diesen Aufschlussreichen Bericht. Ich selbst habe gerade echte Probleme mit dem Pagespeed der bei mit gerade mal im roten Bereich bei 23 Prozent liegt, weshalb ich jetzt dann echt mal mit dem optimieren der Bilder anfangen werde.
Eins hab ich noch nicht so richtig verstanden. Wenn ich auf Google Page Speed gehe, werden die Bilder da quasi fast von alleine optimiert oder sind da noch viele eigene Schritte nötig.
Vielleicht kann mir ja noch jemand Tipps diesbezüglich geben oder ich prüfe einfach mal selbst.
Danke auf jeden Fall für den aufschlussreichen Artikel.
In diesem Sinne
Viele Liebe Grüße
Hallo Hector,
Google PageSpeed stellt deine Bilder ebenfalls optimiert zur Verfügung. Die kannst du auch nutzen. Würde dir allerdings raten die Originaldateien nicht zu überschreiben.
Viele Grüße
Dein Team von SEO Head
Optimus konnte bei mir einige Bilder nicht komprimieren. Ich nutze jetzt das WordPress Plugin WP Smush und bin bisher sehr zufrieden.
Hallo Maja,
vielen Dank für deine Nachricht. Wir werden das Plugin testen und den Artikel ggf. überarbeiten.
Viele Grüße
Dein Team von SEO Head
Danke, genau nach einer solchen Schritt-für-Schritt Anleitung habe ich jetzt schon einige Zeit lang gesucht!
Du verfasst wirklich umfassende, gut verständliche Artikel!
Danke für den Artikel.
Mir wird erst jetzt bewusst, dass ich oft einfach viel zu große Bilder hochlade, diese aber dann im Artikel runterskaliert werden.
Ich werde jetzt einige Bilder auf eine geringere Auflösung runterrechnen BEVOR ich sie hochlade.
LG