Website Bilder für SEO optimieren - 6 Tipps für bessere CWV Werte

Sechs wichtige Tipps zur Optimierung deiner Website Bilder – und das direkt im ersten Blogbeitrag. Wichtige SEO Themen wie dieses kann man nicht oft genug behandeln. Denn die Verwendung von Bildern hat auch schnell einen direkten Einfluss auf die Core Web Vials bzw. die Page Experience.
In diesem Fall kommen die Tipps direkt von Google (https://youtu.be/RQH9IpcAucY) und wurden speziell für die Optimierung von E-Commerce Seiten aufgeführt. Doch diese Ratschläge zur Verbesserung und Verwendung von Bildressourcen ist natürlich auch auf jede anderen Webseite gut umzusetzen.

Was sind Core Web Vitals (CWV)?

Die Core Web Vitals sind Googles Qualitätssignale, welche die Nutzererfahrungen auf der Webseite widerspiegeln. Der Fokus wird dabei auf die Performance der Seite gelegt und bewertet den Ladevorgang, die Stabilität der Website und die Interaktivität auf der Seite. Die drei dafür definierten KPI´s sind ein Teil der gesamten Bewertung, welche seit dem “Page Experience Update” (Februar 2022) einen Einfluss auf das Ranking hat.

Kennzahlen der Core Web Vitals

Largest Contentful Paint (LCP): gibt an, wie lange es dauert bis die Hauptinhalte geladen sind.

First Input Delay (FID): bewertet die Zeitspanne von der ersten Interaktion bis zur Reaktion vom Browser

Cumulative Layout Shift (CLS): misst die Bewegung sichtbarer Elemente und somit die Stabilität der Seite

Du kannst diese Kennzahlen berechnen lassen und (wenn genug Daten vorhanden) dir auch die realen Nutzerzahlen dazu ziehen. Die gängigsten Tools dazu sind die Google Search Console, PageSpeed Insights, Lighthouse und die Chrome DevTools.

Inhaltliche Abgrenzung zur Google Bildersuche

In diesem Beitrag geht es also nicht direkt um die Optimierung für die Suchmaschinen (Bildersuche), sondern um die Verbesserung der Core Web Vitals und der Page Experience. Die Verwendung und Verbesserung des Bilder SEO durch Alt-Tags, Keywords, Dateinamen und umliegenden Texte (etc.) ist natürlich wichtig um Bilder zu optimieren und dafür ein gutes Ranking zu erlangen. Dies ist in diesem Artikel aber nicht Thema.

Bilder mit diesen 6 Tipps optimieren

Bilder spielen in der modernen und ansprechenden Websitegestaltung eine wichtige Rolle. Denn nicht jedes Thema kann bestmöglich mit Text erklärt werden, sondern es benötigt auch Bilder und Grafiken um Themen zu visualisieren und zu veranschaulichen. So wird dein Content nicht nur leichter konsumierbar, sondern ist zudem ansprechender. Denn: `Ein Bild sagt mehr als tausend Worte´.

Je mehr Bilder du aber auf deiner Seite verwendest um so mehr Ressourcen müssen geladen werden und umso wichtiger wird eine gute Optimierung deiner Bilder und Grafiken. Deswegen ist es zu Beginn besonders wichtig, sich darüber Gedanken zu machen in welcher Form man Wissen und Informationen vermitteln möchte. Im Anschluss kann man die relevantesten Maßnahmen bei der Websitegestaltung berücksichtigen und Performance-Schwächen direkt vermeiden. Aber auch in der kontinuierlichen Bildoptimierung einer Seite, sollte man die nachfolgenden Tipps beherzigen um die Ladezeiten nicht zu gefährden.

1.) Verwende das passende Bilddateiformat

Denke über das Dateiformat der Bilder nach, z. B. ob du PNG-, JPEG-, SVG oder webP-Dateien verwenden möchtest.

Das Dateiformat wirkt sich auf die Dateigröße aus, sodass die Wahl der richtigen Formate eine sorgfältige Abwägung erfordert.

Für jedes Format gibt es Vor- und Nachteile. Beispielsweise haben JPEG und webP in der Regel kleinere Dateigrößen, wobei die kleinere Dateigröße auf Kosten der Bildqualität erreicht wird. Allerdings ist eine Verschlechterung der Bildqualität für den Nutzer möglicherweise nicht wahrnehmbar und der Geschwindigkeitsvorteil könnte erheblich sein.
Deshalb hab ich dir hier die wichtigsten Formate aufgelistet:

  • PNG

    • verlustfreie Datenkompression (durch Rastergrafikformat)

    • unterstützt Transparenz

    • eignet sich für Icons transparente Bilder und Logos

    • kann deutlich größer als JPG sein

  • JPG (JPEG)

    • wird von allen Betriebssystemen unterstützt

    • gutes Verhältnis von Dateigröße und -qualität

    • für große detailreiche Bilder wie Fotos

    • unterstützt keine Transparenz

    • Kompression ist verlustbehaftet

  • WEBP

    • 2010 von Google eingeführt zur Performance-Verbesserung von Websites

    • WebP erreicht bei sehr hoher Komprimierung eine bessere Bildqualität als eine JPG Datei 

    • unterstützt Transparenz

    • wird von fast allen modernen Browsern unterstützt

    • kann die Ladezeit von Websites enorm verkürzen

    • ältere Browser haben probleme dieses Format darzustellen

  • SVG

    • hohe Qualität

    • verlustfreie Skalierung

    • ideal für responsive Design

    • von fast allen Browsern unterstützt

    • Dateigröße ist gering, kann bei komplexen Bildern schnell zunehmen

    • spezielle Software zur Bearbeitung nötig

Um festzustellen, ob die Website von der Verwendung eines anderen Bildformats profitieren kann, schau im PageSpeed Insights-Bericht im Abschnitt “Bilder in modernen Formaten bereitstellen” nach. Dieser Bericht listet Bilder auf, die in ein effizienteres Dateiformat konvertiert werden können.

Empfehlung: 

  • Für Logos empfiehlt sich die Verwendung von SVG

  • Für das Header-Bild sollte JPEG oder eine Alternative verwendet werden

  • Für freigestellte Produktbilder kann PNG Verwendung finden, jedoch sollten die Bilder richtig dimensioniert werden. Alternativ kann man auch WEBP verwenden.

  • Für Content- und Teaser-Bilder kann WEBP & JPEG verwendet werden

2.) Bilder entsprechend komprimieren

Nutze den richtigen Qualitätsfaktor für die Bilder, um sie effizient zu kodieren und dabei die gewünschte Bildqualität zu erhalten.

Der Abschnitt “Bilder effizient codieren” des Berichts PageSpeed Insights kann verwendet werden, um Bilder zu identifizieren, die sich für die Optimierung der Komprimierung eignen. Der Bericht zeigt auch mögliche Einsparungen bei der Dateigröße.

Um einen Qualitätsfaktor zu finden, mit dem du zufrieden bist, verwende ein Bildkonvertierungstool deiner Wahl und vergleiche die Vorher-Nachher-Werte von mehreren Bildern mit unterschiedlichen Qualitätswerten.

Google empfiehlt die Website squoosh.app als einfache Möglichkeit, Bilder mit und ohne Kompression zu vergleichen. pixlr.com/de/x/ ist ebenfalls kostenlos und leicht zu bedienen. Für seitenweises komprimieren etlicher Bilder empfiehlt sich ein kostenpflichtiges Tool wie kraken.io. Dieses Tool verfügt auch über Plugins und API-Schnittstellen für einige Content Management Systeme.

3.) Cumulative Layout Shift (CLS) entfernen

Cumulative Layout Shift bezieht sich auf Bewegungen, in denen Inhalte auf der Seite visuell von einem Ort zum anderen bewegt werden, während sie noch geladen werden. Wichtig dabei ist, dass diese Verschiebung nicht direkt durch den Nutzer herbeigeführt wurde.
Obwohl dieses Problem nicht ausschließlich durch Bilder verursacht wird, können sie häufig zu dem Problem beitragen, wenn sie falsch verwendet werden.

In den meisten Fällen ist CLS leicht zu erkennen, indem man während des Ladevorgangs nach Bewegung auf einer Seite sucht, aber es gibt mehrere Werkzeuge, um diese zu messen:

  • der CLS wird wie die anderen Core Web Vitals über die Google Search Console im Abschnitt „Core Web Vitals“ dokumentiert 

  • das Tool PageSpeed Insights gibt den CLS sowohl mit Performance-Daten von anderen Nutzern an, als auch durch eine eigene Berechnung.

  • das Chrome DevTool dokumentiert die Shifts deutlich im Zeitstrahl

4.) Bilder richtig dimensionieren

Lege die nötige Bildbreite und -höhe (Dimension) auf deiner Website fest, da große Bilddateien länger zum Herunterladen benötigen und somit den Pagespeed verschlechtern. Dies hat besonders starken Einfluss, wenn Bilder mit einer hohen Auflösung (bspw. 900 Pixel +) auch auf dem Handy in Originalgröße geladen werden.

Die perfekten Bildgrößen zu finden kann aufgrund der Unterschiede bei Bildschirmgrößen und Auflösungen etwas kompliziert sein. Eine Einschätzung zu den von den eigenen Nutzern verwendeten Device-Größen erhält man z.B. in Google Analytics in den Nutzerdaten.

Wenn der Browser ein Bild selbst zuschneiden muss (bspw. für Mobile), wird dennoch die gesamte Datei heruntergeladen und hat keine Einsparung in der Downloadgröße. Deshalb sollten auf dem Server mehrere “Größen” eines Bildes hinterlegt werden, damit der Browser die benötigte Größe direkt vom Server anfordern kann.
Eine einfache Möglichkeit, falsch dimensionierte Bilder zu erkennen, ist die Verwendung des Abschnitts “Bilder richtig dimensionieren” unter Chancen im PageSpeed Insights-Bericht.

Sobald du Bilder identifiziert hast, die größer sind als notwendig, kannst du das Problem mit Lösungen wie responsive Images beheben.

Es ist normal, dass Bilder immer ein wenig herunterskaliert werden – hier kommt es also auf das Ausmaß an. Idealerweise verfügt die Website über mehrere Bildinstanzen, sodass je nach Gerät und Displaygröße, dass jeweils nächstgrößere Bild geladen wird. Dies reduziert das ressourcenraubende Herunterskalieren der Bilder. Hochskalieren sollte vermieden werden, da sonst das Bild unscharf wird.

5.) Cache-Bilder im Browser

Mit dem Bilder-Caching sagst du dem Browser, wie lange er Bilder sicher zwischenspeichern kann. Für diese Anpassung gibt es spezielle Plugins (WordPress etc.) oder du sprichst direkt mit einem Entwickler.

Wenn du dann ein Bild an den Browser zurück gibst, kannst du einen HTTP-Antwort-Header mit Caching-Anweisungen zurückgeben, z. B. wie lange ein Browser ein Bild zwischenspeichern sollte. Wenn die Bilder nicht häufig geändert werden, kannst du eine lange Cache-Lebensdauer festlegen.
Auch hier kannst du den PageSpeed Insights-Bericht verwenden, um festzustellen, ob die HTTP-Response-Cache-Header auf der Website richtig eingestellt wurden. Der PageSpeed Insights Abschnitt “Verwendet eine effiziente Cache-Richtlinie für statische Inhalte” identifiziert Bilder, die von Caching-Verbesserungen profitieren können.

6.) Sequenziere Bild-Downloads richtig & LazyLoading

Als fortgeschrittener Tipp empfiehlt Google die korrekte Sequenzierung der Reihenfolge in der Webseiten-Ressourcen heruntergeladen werden. Hierfür gibt es aber auch schon Plugins und Browser Einstellungen, welche den Lazy-Load von Bildern ermöglichen. LazyLoading ist das initiale Laden jener Bilder, die der Nutzer auch direkt auf dem Screen sieht. Alle weiteren Bilder, welche sich weiter unten auf der Seite befinden, werden nach Bedarf oder Lazy nachgeladen, sobald der initiale Aufbau der Seite abgeschlossen ist und der Nutzer auf der Seite interagieren kann.

Folgende Download-Reihenfolge wird empfohlen:

  1. Header-Bilder oben auf der Seite

  2. Andere Bilder im ersten sichtbaren Screen

  3. Bilder knapp unterhalb dem ersten sichtbaren Screen

  4. Der Rest der Bilder auf einer Webseite kann faul geladen werden (“LazyLoading”)

Um festzustellen, ob die Website die Bilder effizient lädt, kannst du den PageSpeed Insights-Bericht verwenden. Im Abschnitt “nicht sichtbare Bilder aufschieben”  des Berichts siehst du eine Liste von Bildern, die nach anderen Bildern geladen werden könnten. Alternativ lassen sich diese Informationen auch direkt in den Chrome DevTools auslesen.

© 2023 Andreas Mühringer. All rights reserved