Alle Artikel · 10. Juli 2026 · Shopware 6 · SEO

Produktbilder in Shopware 6 für SEO und Ladezeit vorbereiten

Kamera-JPEGs direkt in die Mediathek zu legen, ist der häufigste Fehler. Shopware erzeugt Thumbnails aus der Quelldatei. Weißrand, fehlende Maße und Dateinamen wie IMG_4832.jpg bleiben dann in Listing und Suche.

LCP und CLS sitzen am selben Bild

Der Largest Contentful Paint wartet auf das größte sichtbare Element. Auf der Detailseite ist das das Hauptfoto. Cumulative Layout Shift entsteht, wenn am <img> width und height fehlen. Der Browser kennt den Platz nicht und schiebt Preis und Button, sobald die Datei da ist.

Nach einer Medien-Migration luden Listings in einem Mandanten die Originaldatei statt des Thumbnails. In der Konsole fehlte der Lauf von bin/console media:generate-thumbnails. Erst danach griffen die im Theme definierten Größen.

Format vor dem Upload wählen

WebP eignet sich für Produktfotos und Banner. PNG bleibt Logos und Grafiken mit Transparenz vorbehalten. Shopware kann aus einer überladenen Quelldatei keine kleine Karte zaubern. Komprimieren Sie deshalb vor dem Upload, etwa mit Squoosh, und schneiden Sie den Weißrand in der Mediathek.

Mit Bild-Editor Pro setzen Sie den Ausschnitt in der Administration. Für Produktkarten hat sich 1:1 bewährt, für Hero-Banner in Erlebniswelten 16:9. Nach dem Speichern erzeugt Shopware die Thumbnails neu.

Thumbnails nach Migration neu erzeugen

Nach Theme-Wechsel oder Medienimport:

bin/console media:generate-thumbnails

Der Befehl läuft über die Medien in der Datenbank und schreibt die Größen aus Theme und Medienkonfiguration. Ohne diesen Schritt erscheint im Listing oft das Original, obwohl die Karte nur wenige hundert Pixel braucht.

Native Themes setzen Lazy Loading für Bilder unterhalb des Viewports. Das erste sichtbare Bild lassen Sie eager, sonst verzögert sich der LCP. Details zu LCP und Weißrand stehen unter LCP über Produktbilder, zu springenden Karten unter CLS auf Kategorieseiten.

Dateiname und Alt-Text in der Mediathek

Google liest den Dateinamen. nike-air-max-schwarz-herren.webp trägt Produkt und Variante. foto_neu_final2.png nicht. Kleinbuchstaben und Bindestriche, keine Leerzeichen.

Den Alt-Text pflegen Sie am Medium oder am Produkt. Beschreiben Sie, was zu sehen ist, ohne „Bild von“ davor. Beispiel: „Schwarzer Nike Air Max, Seitenansicht, weiße Sohle“. Der Text hilft Screenreadern und der Bildsuche, er ersetzt nicht die Produktbeschreibung.

Ablauf, der in der Praxis hält: Datei komprimieren, in die Mediathek legen, zuschneiden, Dateiname prüfen, Alt-Text setzen, Listing in der Storefront ansehen.

Leere Karten im Grid

Optimierte Dateien helfen nicht, wenn Artikel ohne Foto im Listing stehen. Platzhalter halten die Kartenhöhe, bis das echte Bild da ist.

Zum Artikel über Platzhalter-Bilder

Checkliste vor dem nächsten Upload

WebP oder komprimiertes JPEG, Weißrand in der Mediathek entfernt
Thumbnails mit media:generate-thumbnails nach Import oder Theme-Wechsel
width und height am Listing-Bild, Lazy Loading unterhalb des Viewports
Sprechender Dateiname und Alt-Text am Medium