Performance & Core Web Vitals · Shopware Hub
Wie optimiert man Shop-Bilder richtig?
Auch: WebP · AVIF · Bildkompression · Lazy Loading
Kurzantwort
Bilder sind im Shop der größte Gewichtsposten – typisch die Hälfte bis zwei Drittel jeder Seitenladung – und damit der direkteste LCP-Hebel. Die Optimierungs-Trias: moderne Formate (WebP, AVIF), passende Größen für jedes Gerät und Lazy Loading für alles unterhalb des sichtbaren Bereichs. Shopware 6 erzeugt Thumbnail-Größen automatisch; moderne Formate liefern Sie je nach Setup über die Bordmittel neuerer Versionen, ein Plugin oder den Webserver aus.
Die Praxis-Checkliste – und die zwei Ausnahmen vom Lazy Loading
Erstens Formate: WebP spart gegenüber JPEG grob ein Viertel bis die Hälfte, AVIF nochmals mehr – bei praktisch identischer Optik. Je nach Shopware-Version und Setup aktivieren Sie die Generierung in den Medieneinstellungen, per bewährtem Plugin oder lassen den Webserver beziehungsweise ein CDN die Konvertierung on-the-fly erledigen; wichtig ist nur das Ergebnis im Quelltext (picture/srcset mit modernen Typen plus JPEG-Fallback). Zweitens Größen: Die Thumbnail-Konfiguration der Medienordner sollte zu den tatsächlich gerenderten Maßen passen – ein 300-Pixel-Listing-Bild aus einer 1920er-Datei zu skalieren, verschenkt den ganzen Effekt; die Entwicklerkonsole („eigentliche Größe“ vs. „dargestellte Größe“) entlarvt solche Fälle in Sekunden. Drittens Kompression: Qualitätsstufe 75 bis 85 ist der Sweet Spot – darunter leiden Produktfotos sichtbar, darüber wächst nur die Datei. Viertens Lazy Loading – mit den zwei entscheidenden Ausnahmen: Das LCP-Bild (Produkt-Hauptbild, Bühnenbild) darf niemals lazy laden, sonst verschlechtern Sie exakt die Metrik, die Sie verbessern wollen; gleiches gilt für das Logo. Für dieses eine Bild lohnt das Gegenteil: eine Preload-Anweisung, damit der Browser es vor allem anderen holt. Und fünftens die Sorgfalts-Basics: sprechende Dateinamen und Alt-Texte – fürs Bilder-SEO und die Barrierefreiheit, kostenlos mitgenommen.
Kurz-Fakten
- Gewichtsanteil: Bilder stellen typisch 50–70 % des Seitengewichts – der größte LCP-Hebel im Shop.
- Formate: WebP ≈ 25–50 % kleiner als JPEG, AVIF nochmals sparsamer – immer mit Fallback ausliefern.
- Shopware-Bordmittel: automatische Thumbnail-Größen je Medienordner – Konfiguration an reale Rendermaße anpassen.
- Lazy Loading: Standard für alles unter dem Sichtbereich – Ausnahme: LCP-Bild und Logo (eher preloaden).
- Kompressions-Sweet-Spot: Qualität 75–85 – Produktfotos vertragen weniger Verlust als Deko-Bilder.
- Nebengewinn: Alt-Texte und sprechende Dateinamen zahlen auf Bilder-SEO und Barrierefreiheit ein.
Einordnung
Bildoptimierung ist die Diät mit der schnellsten Waage: Kein anderer Eingriff nimmt einer Shop-Seite so viele Kilobyte in so kurzer Zeit ab – und kein anderer wird so oft durch ein einziges lazy geladenes Hauptbild wieder ruiniert. Wer die Checkliste einmal durchzieht und das LCP-Bild heiligt, hat die halbe Vitals-Sanierung hinter sich.
Verwandte Fragen
- Core Web Vitals im Onlineshop
- Shop-Speed & Umsatz
- Theme & JavaScript schlank halten
- Shop-Performance richtig messen
- Produktseiten, die verkaufen
Stand: Juli 2026 · Geprüft von SEO NW