Produktbilder optimieren: WebP, AVIF, Bildgrößen und Lazy Loading

In fast jedem Online-Shop, den wir prüfen, machen Bilder den Großteil des Seitengewichts aus. Das ist nur natürlich – ein Shop verkauft über Bilder. Das Problem sind nicht die vielen Fotos, sondern dass sie häufig in der falschen Größe, im veralteten Format und zum falschen Zeitpunkt ausgeliefert werden. Die gute Nachricht: Kaum etwas lässt sich so leicht beheben, und der Effekt auf die Ladezeit ist deutlich spürbar.

Drei Fragen für jedes Bild

Um ein Bild richtig auszuliefern, müssen Sie drei Dinge klären:

1. Welches Format? JPEG/PNG oder WebP/AVIF?
2. Welche Größe? So viele Pixel, wie der Bildschirm braucht – und keinen mehr.
3. Wann? Sofort oder erst, wenn der Nutzer in die Nähe scrollt?

Formate: WebP und AVIF

WebP wird von allen modernen Browsern unterstützt und liefert bei vergleichbarer Qualität meist spürbar kleinere Dateien als JPEG. Es ist die sichere Standardwahl.

AVIF komprimiert oft noch besser, vor allem bei Fotos mit weichen Farbverläufen. Die Browserunterstützung ist inzwischen breit, allerdings dauert das Kodieren länger, und manche Tools und Plugins kommen noch nicht gut damit zurecht.

Unsere Empfehlung für die Praxis:

• Erzeugen Sie für jedes Bild eine WebP-Version.
• Ergänzen Sie AVIF, wenn Ihre Werkzeuge das zuverlässig beherrschen – mit WebP oder JPEG als Fallback.
• Bewahren Sie hochwertige Originale sicher auf und überschreiben Sie sie nicht mit komprimierten Versionen.
• PNG nur für Grafiken mit Transparenz oder harten Kanten (Logos, Icons). Für Logos und Icons ist SVG sogar noch besser.

Viele CDNs und Plugins konvertieren automatisch und liefern je Browser das beste Format aus. Das ist meist der bequemste Weg.

Größen: Schluss mit 3000 Pixeln fürs Smartphone

Die häufigste Verschwendung: Fotos werden direkt von der Kamera oder vom Lieferanten mit 3000 bis 5000 Pixeln hochgeladen und genau so an einen Smartphone-Bildschirm geschickt.

Was Sie tun sollten

• Eine maximale Upload-Größe festlegen, etwa 2000 Pixel an der langen Kante. Das reicht für Zoom und für Feeds.
• Mehrere Größen erzeugen (Thumbnail, Kategorie, Produkt, Zoom). WordPress/WooCommerce erledigt das automatisch; achten Sie darauf, dass die Größen zu Ihrem Theme passen.
• srcset und sizes nutzen, damit der Browser für jeden Bildschirm die passende Größe wählt. Die meisten modernen Themes tun das bereits. Prüfen Sie aber, ob sizes zu Ihrem tatsächlichen Layout passt – ein falscher sizes-Wert führt dazu, dass der Browser ein größeres Bild lädt als nötig.
• Nach einem Theme-Wechsel die Thumbnails neu generieren. Sonst werden womöglich falsche Größen ausgeliefert.

Wie schwer dürfen Bilder sein?

Eine magische Zahl gibt es nicht. Als Faustregel gilt aber: Ein Kategorie-Thumbnail sollte nicht Hunderte KB wiegen, und das Hauptproduktbild auf dem Smartphone kommt in der Regel bequem mit einem Bruchteil der Originalgröße aus. Zeigt PageSpeed Insights Bilder mit ein oder zwei MB, haben Sie Ihren ersten schnellen Gewinn gefunden.

Lazy Loading: ja, aber nicht überall

Lazy Loading bedeutet, dass Bilder erst geladen werden, wenn der Nutzer in ihre Nähe scrollt. In modernen Browsern genügt dafür das Attribut loading="lazy" – JavaScript ist nicht nötig.

Der häufigste Fehler: Auch das Hauptbild der Seite wird per Lazy Loading verzögert. Das Hauptproduktfoto oder das Hero-Bild der Startseite ist meist das LCP-Element. Wer es verzögert, verschlechtert den LCP. Deshalb:

• Hauptbild: kein Lazy Loading, idealerweise mit fetchpriority="high".
• Die ersten 2–4 Produktbilder einer mobilen Kategorieseite: ebenfalls nicht lazy.
• Alles andere: loading="lazy".

Mehr zu Bildern und LCP lesen Sie in unserem Beitrag zu Core Web Vitals für Online-Shops.

Abmessungen: das Geheimnis für null CLS

Jedes Bild sollte width und height angeben (oder per CSS eine aspect-ratio). So reserviert der Browser schon vor dem Laden den richtigen Platz, und die Seite springt nicht. Halten Sie außerdem ein einheitliches Seitenverhältnis bei Produktfotos ein (alle quadratisch oder alle 4:5): Kategorieraster wirken aufgeräumter, und Sie vermeiden ungleich hohe Zeilen.

Bild-SEO: die Grundlagen

• Sprechende Dateinamen: schwarzer-lederstiefel.webp statt IMG_4521.webp. In griechischen Shops funktionieren Greeklish-Namen – griechische Wörter in lateinischer Schrift – problemlos.
• Alt-Text, der das Bild tatsächlich beschreibt: „Schwarzer Schnürstiefel aus Leder, Seitenansicht“. Keine Keyword-Liste.
• Kein Text auf Produktfotos. Suchmaschinen können ihn nicht lesen, und Google Shopping sowie Preisvergleichsportale lehnen solche Bilder oft ab.
• Bilder in Feeds (Skroutz – Griechenlands größtes Preisvergleichsportal – oder Google) müssen ohne Hotlink-Schutz erreichbar sein.

Ablauf für neue Produkte

1. Mit einheitlichem Hintergrund und Seitenverhältnis fotografieren.
2. Bearbeiten und mit maximal 2000 Pixeln als hochwertiges JPEG exportieren.
3. Der Datei einen sprechenden Namen geben.
4. Hochladen – das System erzeugt Größen und WebP/AVIF automatisch.
5. Alt-Text ausfüllen.
6. Die Seite kurz auf dem Smartphone prüfen.

Audit-Checkliste für einen bestehenden Shop

• [ ] Werden Bilder als WebP oder AVIF ausgeliefert?
• [ ] Gibt es auf wichtigen Seiten Bilder über 1 MB?
• [ ] Sind srcset und sizes vorhanden und korrekt?
• [ ] Wird das Hauptbild ohne Lazy Loading geladen?
• [ ] Nutzen die übrigen Bilder Lazy Loading?
• [ ] Haben alle Bilder Abmessungen?
• [ ] Wurden die Thumbnails seit dem letzten Theme-Wechsel neu generiert?
• [ ] Ist der Alt-Text ausgefüllt?

Und Ihr bestehender Katalog?

Wenn Sie bereits Tausende Fotos haben, müssen Sie nicht jedes einzeln überarbeiten. Die meisten Optimierungstools können die Mediathek in einem Rutsch verarbeiten. Testen Sie das zunächst auf einer Staging-Umgebung oder an einer kleinen Charge, prüfen Sie die Qualität bei Produkten mit feinen Details (Stoffe, Schmuck) und verarbeiten Sie erst dann den Rest. Behalten Sie auch den Speicherplatz im Blick: WebP- und AVIF-Kopien in jeder Größe summieren sich. Stellen Sie sicher, dass Ihr Hosting-Paket und Ihre Backups das verkraften.

Fazit

Bildoptimierung gehört zu den wenigen technischen Aufgaben mit nahezu garantiertem Ertrag: schnellere Seiten, ein besserer LCP und weniger mobiles Datenvolumen für Ihre Kunden.

Wenn wir das für Sie übernehmen oder prüfen sollen, was Ihre Website heute ausliefert, sehen Sie sich unseren Service für Ladezeit-Optimierung an oder nehmen Sie Kontakt mit uns auf.