Google PageSpeed – Bilder optimieren

Bilder optimieren spart an Dateigröße

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.

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.

Bilder optimieren mit Photoshop

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.

7 Kommentare
  1. Lucky
    Lucky says:

    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

    Antworten
  2. Benny
    Benny says:

    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!

    Antworten
    • SEO-Head
      SEO-Head says:

      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

      Antworten
  3. Hector
    Hector says:

    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

    Antworten
    • SEO-Head
      SEO-Head says:

      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

      Antworten

Trackbacks & Pingbacks

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.