SEO-News

Optimierung von Bildern auf E-Commerce-Websites

Weil Bilder insbesondere auf E-Commerce-Websites eine wichtige Rolle spielen, hat Google jetzt einige Tipps zur Optimierung von Bildern auf solchen Websites vorgestellt.

 

Die Optimierung von Bildern kann eine wichtige Rolle bei der Verbesserung der User Experience von Websites spielen. Das gilt insbesondere für E-Commerce-Websites, auf denen es oftmals eine große Anzahl von Bildern gibt.

In einem neuen Video gibt Alan Kent von Google sechs Tipps zur Optimierung von Bildern auf solchen Websites.

 

Vermeiden des Cumulative Layout Shifts (CLS)

Der Cumulative Layout Shift (CLS) ist eine von drei Kennzahlen, die Google zur Bewertung der Page Experience von Webseiten verwendet: den Core Web Vitals. Sie sind ein Rankingfaktor für Google. 

Der CLS drückt aus, ob es beim Laden einer Webseite zu plötzlichen und unerwarteten Verschiebungen von Inhalten kommt. Solche Verschiebungen können zum Beispiel durch Bilder ausgelöst werden. Daher ist es wichtig, Bilder mit einer Höhen- und Breitenangabe im Quellcode zu versehen. So kannn der Browser bereits vor dem Laden eines Bildes den benötigten Platz reservieren. Das hilft dabei, Verschiebungen von Inhalten durch Bildern zu vermeiden.

 

Verwenden der passenden Bildmaße

Auf manchen Webseiten werden Bilder verwendet, deren Ausmaße größer sind, als es für die Darstellung im Browser nötig ist. Das gilt insbesondere für die mobile Darstellung auf Smartphones mit kleinen Bildschirmen. Große Bilder bedeuten viel Datenvolumen, das übertragen werden muss. Zudem belasten große Bilder die CPU der Geräte stärker als kleinere Bilder.

Daher sollte darauf geachtet werden, die passenden Ausmaße für Bilder zu verwenden. Das kann zum Beispiel durch das Anbieten unterschiedlich großer Bilder für verschiedene Auflösungen geschehen. Möglich ist auch der Einsatz von Content Delivery Networks (CDNs), die von sich aus in der Lage sind, Bilder passend auszuliefern.

 

Verwenden des passenden Dateityps

Je nachdem, welches Dateiformat für ein Bild verwendet wird, kann sich die Dateigröße deutlich unterscheiden. Moderne Bildformate wie webP bieten enormes Optimierungspotential.

Dabei ist darauf zu achten, welche Bilder eine besonders hohe Qualität besitzen müssen und bei welchen Bildern geringfügige Qualitätsverluste zugunsten kleinerer Bilddateien akzeptabel sind. So sollten zum Beispiel Navigationselemente wie Klickflächen sehr gut lesbar sein, während bei größeren Produktbildern eine geringfügige Qualitätsreduktion oftmals gar nicht auffällt

Leider unterstützen nicht alle Browser alle Bilddateitypen. Um herauszufinden, auf welchen Browsern ein bestimmter Dateityp funktioniert, kann man die Website caniuse.com besuchen.

 

Bildkompression

Das Komprimieren von Bildern ist eine weitere Möglichkeit zum Reduzieren der Dategröße. Google PageSpeed Insights zeigt für getestete Seiten eine Liste von Bildern an, die für eine Komprimierung in Frage kommen. Allerdings ist dabei zu beachten, dass PageSpeed Insights nicht auf Qualitätsverluste durch das Komprimieren achtet. Daher sollte man die Effekte mit einem geeigneten Tool wie zum Beispiel squoosh.app selbst testen.

Vorsicht ist außerdem geboten, wenn die Nutzer die Möglichkeit haben, ein Bild per Zoom zu vergrößern. Dann muss die Qualität des Bildes entsprechend höher sein.

 

Caching der Bilder

Für Bilder, die sich nur selten ändern, sollte eine ausreichend lange Caching-Dauer durch den Webserver angegeben werden. Bei einem erneuten Besuch der Seite durch denselben Nutzer müssen die entsprechenden Bilder dann nicht nochmals übertragen werden, sondern können aus dem Cache des Browsers ausgespielt werden. Kandidaten für eine Optimierung der Caching-Dauer sind ebenfalls in Google PageSpeed Insights zu finden.

Verwendet man ein CDN, so sorgt dieses durch das Cachen von Bildern in unterschiedlichen Knoten des Netzes ebenfalls für ein schnelles und effizientes Ausspielen der Bilder.

 

Optimale Reihenfolge zum Download der Bilder beachten

Normalerweise sollten große Bilder wie das Hero Image einer Seite zuerst geladen werden. Der Grund dafür ist, dass große Elemente den Largest Contentful Paint (LCP) beeinflussen, der ebenfalls zu den Core Web Vitals gehört.

Im nächsten Schritt sollten alle anderen Bilder geladen werden, die ohne scrollen sichtbar sind. Diese Bilder befinden sich "above the fold", also im direkt sichtbaren Seitenbereich. Bilder, die "below the fold" sind, können danach geladen werden.

Darauf sollten Bilder folgen, welche direkt nach dem Scrollen auftauchen, bei denen also die Chance auf eine Anzeige also recht groß ist. Und schließlich sind die Bilder an der Reihe, die erst nach längerem Scrollen zu sehen sind.

Eine verbreitete Praxis, dies umzusetzen, ist Lazy Loading. Dadurch werden Bilder erst dann geladen, wenn sie den sichtbaren Bereich einer Webseite erreichen. Aber Achtung: Lazy Loading nicht für Bilder above the fold verweden, weil dies den LCP der Seite erhöhen kann.

Schließlich kann auch der Einsatz von HTTP/2 das Laden von Bildern beschleunigen.

 

Titelbild: Google

 


Christian Kunz

Von Christian Kunz

SEO-Experte.
Sie benötigen Beratung für Ihre Webseite? Klicken Sie hier


Anzeige

SEO-Vergleich


Verwandte Beiträge

SEO-Newsletter bestellen

Im monatlichen SEO-Newsletter erhaltet Ihr eine Übersicht der jeweils zehn wichtigsten SEO-Meldungen des Monats. Mit dem SEO-Newsletter bleibt Ihr auf dem Laufenden.
Ich bin mit den Nutzungsbedingungen einverstanden

Anzeigen

OSG

 

Senior SEO

 

 

 

 

Anzeige

rnkeffect

Premium-Partner (Anzeige)


Anzeigen

InterNetX

SEO Freelancer

SEO Agentur aus Darmstadt

SEO-Vergleich

Online Solutions Group


Sprecher auf

Onsite-Optimierung

Onsite-Optimierung

 

SEO- und Suchmaschinenblogs

SEO-FAQ

Bild © FM2 - Fotolia.com

Bekannt aus

Website Boosting


Internet World Business

SEO United


The SEM Post


Webselling

SEO selber machen

SEO selber machen

Jetzt vernetzen

SEO-Glossar

SEO-Glossar

 

SEO im Ohr, der Podcast von SEO Südwest: aktuell Folge

SEO-Beratung

Wir bringen gemeinsam Ihre Webseite in Google nach vorne. Profitieren Sie von jahrelanger SEO-Erfahrung.

Social Networks und RSS-Feed

Auszeichnungen

seo19 sieger sichtbarkeit 2020 200x200px