3 Tipps zur Optimierung von Bildern im E-Commerce

Bildoptimierung für SEO ist für dich Neuland? No problem. Wir sind für dich da. Wenn du damit schon vertraut bist, haben wir bestimmt auch noch den einen oder anderen spannenden Pro-Tipp, wie du deine Bilder im E-Commerce noch mehr zum Strahlen bringen kannst. Produktbilder, Produkt Thumbnails, Kategoriebilder, Banner oder Buttons. Wie kannst du sicherstellen, dass sie effizient sind? Wir haben uns hierfür im Video von Google Search Central schlau gemacht.

1. Schluss mit Image Cumulative Layout Shift
   Cumulative Layout Shift (CLS) ist von Google als eines der drei Core Web Vitals bestimmt worden und nimmt einen großen Einfluss auf die User Experience. Und was haben Bilder mit dem Cumulative Shift zu tun? Um eine Website zu laden, startet dein Browser mit dem Download des HTML-Markup deiner Seite. Die meisten Browser zeigen den obersten Teil der Seite an, bevor die komplette Seite heruntergeladen wurde. Damit deine Wartezeit nicht zu lang ist, werden alle gefundenen Verweise auf Bilder in einer Warteschlange aufgenommen. Diese warten darauf, noch heruntergeladen zu werden. JavaScript- und CSS-Dateien werden auch in die Warteschlange aufgenommen und parallel zum Hauptinhalt heruntergeladen. Merke: Layoutverschiebungen kommen dann vor, wenn der Browser bemerkt, dass er nicht den korrekten Platz für ein Bild gelassen hat. Die Behebung von CLS-Problemen bei Bildern kann so simpel sein, wie die Aufnahme von Bildabständen in das HTML-Markup. Denn so weiß dein Browser direkt, wie viel Platz er für das Bild einplanen muss.
2. Verwende die richtigen Bildgrößen
   Nutze die korrekte Breite und Höhe für deine Bilder. Klingt banal? Ist es aber nicht. Denn größere Dateien beanspruchen mehr Zeit, wenn du sie herunterlädst – besonders auf Mobiltelefonen mit langsamen Netzverbindungen. Ebenso sind größere Bilder auch zeitintensiver in der Verarbeitung. Verschiedene Gerätegrößen und Auflösungen lassen dich verzweifeln? Hoffentlich bald nicht mehr. Denn hier liegt das Problem: Wenn dein Browser das Bild verkleinert oder zuschneidet, dann ist deine heruntergeladene Datei größer als notwendig, also eine Verschwendung. Eine einfache Lösung: Im PageSpeed Insights-Bericht kannst du dir unter „richtig dimensionierte Bilder“ die Bilder in falscher Größe anzeigen lassen. Page Speed Insight erkennt Bilder auf einer Seite, die größer sind als nötig und führt die URLs auf.
   Wenn es für dich zu zeitintensiv sein sollte, die Bildgrößen anzupassen, ziehe in Betracht, ein Content Delivery Network zu beauftragen.
3. Nutze das beste Bilddateiformat
   PNG, JPEG oder doch ein anderes Format? Fakt ist: Das Dateiformat beeinflusst die Dateigröße. Lass hier am besten Vorsicht walten, da Dateien wie JPEG-Bilder des Öfteren durch verschiedene Algorithmus-prozesse verkleinert werden. Gibt es ein perfektes Bildformat, dass du nutzen kannst? Eine Herausforderung besteht darin, dass nicht alle Bildformate auch mit allen Browsern arbeiten. Pro-Tipp: Mit der Website caniuse kannst du checken, welche Browser, welches Bilddateiformat akzeptieren.

👉  Das waren 3 Tipps für dein Doing im Bilder-SEO. Die anderen 3 Tipps findest du im Video von Google Search Central.