Produktbilder für Shopify und Onlineshops optimieren

Ein Blogbild unterstützt den Text. Ein Produktbild ist der Hauptgrund, warum jemand kauft. Das erhöht den Einsatz auf dreierlei Weise:

• Details zählen. Kunden zoomen hinein, um Material, Nähte oder Etiketten zu prüfen, die Bilder müssen also auch in großer Darstellung bestehen.
• Einheitlichkeit zählt. Eine Kollektionsseite mit gemischten Formen, Beleuchtungen und Hintergründen wirkt wenig vertrauenswürdig.
• Geschwindigkeit zählt. Kollektionsseiten laden Dutzende Bilder gleichzeitig, ein paar hundert zusätzliche Kilobyte pro Bild summieren sich also schnell, besonders mobil.

Ziel ist es, genug Details für eine sichere Kaufentscheidung zu behalten und jedem Käufer nur die Pixel zu schicken, die er braucht.

Gehostete Shop-Plattformen wie Shopify speichern Ihr hochgeladenes Bild, erstellen mehrere skalierte Versionen und liefern sie über ein Content Delivery Network aus, oft umgewandelt in moderne Formate wie WebP für Browser, die sie unterstützen. Das ist bequem und verändert, wie Sie Dateien vorbereiten sollten.

• Vorteil: Sie können ein gutes JPG oder PNG hochladen und darauf vertrauen, dass die Plattform es effizient skaliert und ausliefert.
• Nachteil: Da die Plattform Ihre Datei erneut verarbeitet, ist alles, was Sie vorher tun, nur der erste Schritt, und jedes zusätzliche verlustbehaftete Speichern kostet Qualität.

Prüfen Sie die aktuellen Hilfeseiten Ihrer Plattform auf empfohlene Maße und Dateigrenzen, denn diese ändern sich mit der Zeit.

Das ist die Frage, die die meisten Shop-Betreiber falsch beantworten. Hier sind die beiden Ansätze nebeneinander.

Bei einem gehosteten Shop skalieren Sie auf die Zielgröße und speichern in hoher Qualität, etwa 85, und laden dann hoch. Skalieren und komprimieren erledigt beides in einem Schritt, sodass das Bild nur einmal gespeichert wird. Bei einem selbst gehosteten Shop ohne automatische Verarbeitung komprimieren Sie mit Bild komprimieren kräftiger und halten das Hauptbild bequem leicht.

• JPG: ein guter Standard für Fotos auf einfarbigem Hintergrund. Klein und universell. Die Hilfeseite von Shopify nennt PNG als besten Dateityp für die meisten Produktbilder, gefolgt von JPEG, aber ein hochwertiges JPG ist bei Fotografien weit leichter.
• PNG: nützlich für Freisteller mit transparentem Hintergrund, aber bei Fotos groß.
• WebP: kleiner als beide und unterstützt Transparenz. Viele Plattformen wandeln es für Sie um, vielleicht müssen Sie es also nicht selbst hochladen.

Im Zweifel sehen Sie sich den Formatvergleich an. Denken Sie daran, dass JPG transparente Bereiche weiß färbt, prüfen Sie also, wie ein Freisteller auf dem Hintergrund Ihres Shops aussieht.

• Vor dem Hochladen zu stark komprimieren und die Plattform dann erneut komprimieren lassen.
• Formen und Hintergründe mischen, was Kollektionsraster unordentlich aussehen lässt.
• Riesige Dateien hochladen, etwa Originale mit 6000 Pixeln, die die Arbeit im Admin-Bereich verlangsamen und nichts Sichtbares bringen.
• Alternativtext weglassen, was die Barrierefreiheit und die Chance auf ein Ranking in der Bildersuche schmälert. Der Bild-SEO-Ratgeber zeigt, was zu schreiben ist.
• Nie auf dem Handy testen, wo die meisten Käufer unterwegs sind.

Testen Sie Ihre wichtigste Kollektionsseite und einige Produktseiten mit PageSpeed Insights und vergleichen Sie die Ergebnisse vorher und nachher. Achten Sie auf das größte Bild jeder Seite und das Gesamtgewicht der Bilder. Ist eine Seite noch schwer, verringern Sie zuerst die Pixelmaße Ihrer Uploads, denn ein kleineres Bild hilft mehr als eine niedrigere Qualitätseinstellung. Die Checkliste zur Bildoptimierung für Websites behandelt weitere Schritte wie verzögertes Laden und Caching.