WooCommerce-Produktbilder: schneller laden, ohne Cloud

In einem WooCommerce-Shop sind die Produktbilder fast immer der größte Posten auf der Seite – und der häufigste Grund für lange Ladezeiten. Wer sie in moderne Formate umwandelt, alle Thumbnail-Größen mitnimmt und das Nachladen sauber steuert, holt am meisten heraus. Das geht komplett lokal auf dem eigenen Server, ohne Bild-CDN und ohne dass ein Produktfoto einen fremden Dienst sieht.

Warum Shop-Bilder so schwer wiegen

WooCommerce erzeugt aus jedem hochgeladenen Produktbild mehrere Größen: Katalog-Thumbnail, Einzelansicht, Zoom, dazu die Theme-eigenen Zuschnitte. Ein einzelnes Produkt kann so schnell auf ein Megabyte an Bilddaten kommen – multipliziert mit 30 Artikeln auf einer Kategorieseite wird daraus die Hauptlast. Unkomprimierte JPEGs und PNGs direkt aus der Kamera oder aus Canva sind dabei der Normalfall, nicht die Ausnahme.

WebP und AVIF für jede Größe

Der wirksamste Hebel ist die Formatumwandlung. WebP spart gegenüber JPEG bei gleicher sichtbarer Qualität grob 25 bis 35 Prozent, AVIF noch einmal deutlich mehr. Wichtig ist, dass nicht nur das Originalbild umgewandelt wird, sondern alle von WooCommerce erzeugten Größen – sonst lädt die Kategorieseite weiter die schweren Thumbnails. Und der Frontend-Code muss per srcset so umgeschrieben werden, dass der Browser die kleinste Datei nimmt, die er darstellen kann, mit dem Originalformat als Rückfall für ältere Clients.

Das lässt sich mit einem lokal arbeitenden Plugin lösen. Enfants IMG Performer wandelt Uploads automatisch in WebP (kostenlos) und AVIF (Pro) um, inklusive aller Thumbnail-Größen, und schreibt das srcset um – ohne Upload in eine Cloud, ohne Account. Die Bulk-Funktion zieht den bestehenden Produktkatalog in Etappen nach; das läuft am besten zu einer ruhigen Uhrzeit, weil die Massenumwandlung den Server belastet, nicht die einzelne Konvertierung beim Upload.

Lazy Loading richtig einsetzen

Seit WooCommerce 10.6 sind Produktbilder standardmäßig „lazy“, werden also erst geladen, wenn sie in den sichtbaren Bereich scrollen. Das hilft auf langen Kategorieseiten – kann aber das Hauptbild der Produktseite verzögern, wenn es fälschlich mit verzögert wird. Faustregel: Das erste, sofort sichtbare Bild (Hero, Produkt-Hauptbild) lädt eager, alles darunter lazy. Die meisten aktuellen Themes und WooCommerce selbst handhaben das inzwischen korrekt; nach einem Theme-Wechsel oder Page-Builder-Einsatz lohnt ein kurzer Blick mit den DevTools.

Originale behalten, Bildgrößen aufräumen

• Originaldateien nie überschreiben – für spätere Neu-Zuschnitte oder einen Formatwechsel braucht ihr das verlustfreie Ausgangsbild.
• Nicht genutzte Bildgrößen abschalten. Jede registrierte Größe erzeugt bei jedem Upload eine zusätzliche Datei; viele Themes definieren Zuschnitte, die im Shop gar nicht vorkommen.
• Produktbilder vor dem Upload auf eine sinnvolle Maximalbreite bringen (meist reichen 1600 px für die Zoom-Ansicht). Ein 4000-px-Foto als Quelle bringt nichts außer Rechenlast.

Alt-Texte für Produktbilder

Zur Performance gehört im Shop auch die Barrierefreiheit: Produktbilder brauchen einen Alt-Text, der das Produkt beschreibt, keine reine Wiederholung des Produktnamens. Bei großen Katalogen ist das von Hand kaum zu schaffen – hier hilft eine KI-gestützte Generierung, die den Text als Entwurf liefert und die informationstragenden Bilder trotzdem einen redaktionellen Blick bekommen. Worauf es dabei ankommt, steht im Beitrag zur Barrierefreiheit im Online-Shop.

Reihenfolge fürs Umsetzen

Erst die Formatumwandlung inklusive Bulk-Lauf über den Bestand, dann die ungenutzten Bildgrößen abschalten, dann Lazy Loading und die Alt-Texte. Wie das im größeren Bild der WordPress-Optimierung zusammenpasst, steht im BFSG-Praxisleitfaden für WordPress.

Zuletzt geprüft: September 2026. Dieser Beitrag ist eine praktische Orientierung und ersetzt keine Rechtsberatung.

Beitragsbild: Growtika / Unsplash