Produktbilder optimieren: WebP, Lazy Load, CDN

WebP senkt das Bildgewicht meist um 25-35 Prozent gegenüber JPG
Das Hauptbild eines Produkts unter 100-200 KB nach Komprimierung halten
srcset sorgt dafür, dass das Handy keine Desktop-Auflösung lädt
Lazy Load für Bilder unterhalb des Bildschirms, nie für das Hauptbild
Ein CDN ergänzt du bei Traffic aus mehreren Regionen und schweren Galerien
Ein Alt-Text mit Produktnamen hilft dem SEO und ist Pflicht für Barrierefreiheit
[/dwb_keytakeaways]

Warum Bilder über die Geschwindigkeit deines Shops entscheiden

Auf den meisten Produktseiten, die ich prüfe, machen Bilder 60 bis 80 Prozent des gesamten Seitengewichts aus. Der ganze Rest, also Code, Schriften und Skripte, ist ein Bruchteil dessen, was eine direkt aus der Kamera hochgeladene Produktgalerie wiegt. Deshalb ist die Bildoptimierung meist der günstigste und schnellste Weg, einen Shop zu beschleunigen, ohne das Theme umzubauen und ohne den Code anzufassen.

Die Sache hat zwei Dimensionen, und beide schlagen sich in Geld nieder. Die erste ist SEO: Das größte Bild auf dem Bildschirm ist meist das Element, das Google als LCP misst, eine der Core Web Vitals. Ein langsam ladendes Hauptbild bedeutet eine schlechtere Bewertung und ein niedrigeres Ranking. Die zweite Dimension ist die Conversion: Ein Kunde, der vier Sekunden auf das Bild des Hoodies wartet, schließt den Tab eher, als das Produkt in den Warenkorb zu legen. Schwere Bilder kosten doppelt, im Ranking und im Umsatz.

Die gute Nachricht: Das ist ein Bereich mit klaren, wiederholbaren Schritten. Hier gibt es keine Magie und kein Geheimwissen. Es gibt Format, Komprimierung, Größen, die Art des Ladens und optional ein CDN. Der Reihe nach.

WebP und AVIF: das Format, das ein Drittel Gewicht spart

Die schnellste einzelne Änderung, die du vornehmen kannst, ist der Abschied von JPG zugunsten eines modernen Formats. WebP ist ein Format von Google, das bei gleicher Qualität meist 25 bis 35 Prozent weniger wiegt als JPG. AVIF geht noch weiter und schafft weitere 20 bis 30 Prozent, zum Preis eines langsameren Encodings und einer leicht schwächeren Unterstützung auf älteren Geräten.

In der Praxis musst du dich nicht für eines entscheiden. Der beste Ansatz ist, AVIF an Browser auszuliefern, die es annehmen, WebP als Fallback für den Rest, und das alte JPG nur für wirklich antike Geräte zu behalten. Klingt kompliziert, aber in WordPress übernimmt ein Plugin diese gesamte Logik, für dich ist es also ein einziges Häkchen in den Einstellungen.

Komprimierung: wo die Grenze zwischen Gewicht und Qualität liegt

Das Format allein ist nicht alles. Der zweite Hebel ist der Grad der Komprimierung, also wie viele Bilddaten du gegen geringeres Gewicht eintauschst. Hier gilt gesunder Menschenverstand: Bei Produktbildern zielst du auf eine Komprimierung, die das Gewicht aggressiv senkt, aber die für die Kaufentscheidung wichtigen Details bewahrt, etwa die Struktur des Stoffs oder die Farbe.

Die konkreten Richtwerte, die ich bei Shops anstrebe:

• Hauptbild des Produkts: meist 80-200 KB nach Umwandlung in WebP, je nach Abmessung. Über 300 KB lohnt sich die Prüfung, ob stärker komprimiert werden kann.
• Vorschaubilder im Katalog: oft unter 30 KB, weil sie klein angezeigt werden und keine volle Detailtiefe brauchen.
• Galerie- und Lifestyle-Bilder: bis 250 KB, weil sie meist unterhalb des Bildschirms laden und das LCP nicht beeinflussen.

Die häufigste Sünde, die ich sehe, ist ein Produktbild von einem oder zwei Megabyte, weil jemand die Datei direkt vom Handy oder aus der Kamera in einer Breite von 4000 Pixeln hochgeladen hat. Allein die Anpassung der Abmessung auf vernünftige 1500 Pixel plus Komprimierung senkt das Gewicht oft um das Zehnfache, ohne dass das Auge des Kunden auf dem Bildschirm einen Unterschied sieht.

Abmessungen und srcset: das Handy braucht keine Desktop-Grafik

Stell dir vor, ein Kunde kommt mit dem Handy auf einem 400 Pixel breiten Bildschirm, und der Shop lässt ihn ein 2000 Pixel breites Bild herunterladen, weil genau diese eine Datei auf dem Server liegt. Das ist reine Verschwendung von Datenvolumen und Ladezeit. Die Lösung ist srcset, also das Angeben mehrerer Größen desselben Bildes, aus denen der Browser selbst die beste für den jeweiligen Bildschirm wählt.

WordPress macht das seit Jahren nativ: Beim Hochladen eines Bildes erzeugt es mehrere Größen (Vorschau, mittel, groß) und setzt sie in das Attribut srcset. Deine Aufgabe ist nur, sicherzustellen, dass das Theme das tatsächlich nutzt und dass die erzeugten Größen zu den Stellen passen, an denen du die Bilder anzeigst. Falsch gewählte Bildgrößen im Theme sind eine häufige stille Ursache dafür, dass das Handy trotz korrektem srcset weiterhin zu große Dateien lädt.

Lazy Load: Bilder erst laden, wenn sie gebraucht werden

Lazy Load, also verzögertes Laden, bedeutet, dass der Browser ein Bild erst lädt, wenn der Kunde dorthin scrollt, und nicht alle auf einmal beim Aufruf. Für eine Seite mit langer Galerie oder Produktlisting ist das eine enorme Ersparnis, denn beim ersten Aufruf lädst du nur, was auf dem Bildschirm sichtbar ist.

Heute brauchst du dafür kein eigenes Plugin und keine JavaScript-Bibliothek. Es reicht das native Browser-Attribut loading lazy, das WordPress automatisch zu Bildern im Inhalt hinzufügt. Es gibt eine Bedingung, die du keinesfalls brechen darfst.

• Das Hauptbild des Produkts, sofort sichtbar auf dem Bildschirm: niemals Lazy Load. Hier willst du das Gegenteil, also ein Laden mit Priorität (fetchpriority high oder preload), denn es zählt als LCP.
• Alle Bilder unterhalb der Falz: Lazy Load auf jeden Fall, weil sie beim Aufruf ohnehin niemand sieht.
• Logo und Icons im Header: kein Lazy Load, weil sie oberhalb der Falz liegen und sofort gebraucht werden.

Lazy Load auf das Hauptbild zu legen ist der häufigste Fehler, der die Core Web Vitals verschlechtert statt verbessert. Der Browser verzögert dann das Laden des wichtigsten Elements, und das LCP steigt. Deshalb gehört zur Lazy-Regel immer eine Ausnahme für das erste, sichtbare Bild.

CDN: wann du es wirklich brauchst

Ein CDN, also ein über die Welt verteiltes Servernetz, liefert deine Bilder vom Standort aus, der dem Besucher am nächsten ist. Ein Kunde aus Hamburg bekommt das Bild von einem Knoten in Deutschland und nicht von deinem Server. Das verkürzt die Ladezeit und entlastet das Hosting. Klingt großartig, ist aber nicht etwas, das jeder Shop braucht.

Ein CDN lohnt sich real, wenn du Besucher über mehrere Länder verteilt hast, wenn deine Seiten sehr viele schwere Bilder in Galerien tragen oder wenn du die Last von einem Shared-Hosting nehmen willst. Für einen lokalen Shop mit gutem Hosting und bereits in WebP umgewandelten Bildern ist der Gewinn durch ein CDN oft kosmetisch. Die Reihenfolge ist wichtig: zuerst Format, Komprimierung und Größen, weil das die größte Verbesserung gratis bringt, und ein CDN ergänzt du erst, wenn die Felddaten zeigen, dass das Hosting der Engpass ist.

Beliebte Optionen sind Cloudflare (mit einem brauchbaren Gratis-Plan, der vielen Shops reicht), BunnyCDN (günstig, nach Transfer abgerechnet) sowie das eingebaute CDN mancher Bild-Plugins, die die Grafiken bei der Umwandlung gleich aus ihrem Netz ausliefern. Für die meisten Shops, die ich betreue, sind das kostenlose Cloudflare plus eine gute Bildoptimierung das komplette Paket.

Alt-Texte: SEO und Barrierefreiheit in einem

Das Attribut alt, also der Alternativtext eines Bildes, hat zwei Aufgaben gleichzeitig, und beide solltest du verstehen. Erstens ist es ein Signal an Google, das dem Bild in die Google-Bildersuche hilft und die thematische Relevanz der Seite stärkt. Zweitens ist es der Text, den Screenreader für blinde Menschen vorlesen und der angezeigt wird, wenn das Bild nicht lädt. Ein guter Alt-Text bedient beide Ziele mit einer Beschreibung. Bei Shops in Deutschland gehört eine zugängliche Seite zudem zum guten Ton und stützt das Vertrauen.

Die Regel ist einfach: Beschreibe in natürlicher Sprache, was zu sehen ist, und baue den Produktnamen dort ein, wo er passt. Ohne Keyword-Stuffing, denn das schadet sowohl dem Ranking als auch der Barrierefreiheit.

Automatisierung in WordPress: einmal einstellen und vergessen

Diese ganze Optimierung klingt nach viel Arbeit, aber in WordPress lässt sich das meiste so automatisieren, dass es bei jedem neuen Bild ohne dein Zutun läuft. Entscheidend ist, die Einstellungen einmal bewusst zu wählen, und danach durchläuft jedes neue Bild im Shop denselben Prozess von selbst.

Nach dieser Konfiguration lädst du neue Produkte normal hoch, und das Plugin wandelt um, komprimiert und liefert leichte Bilder aus. Das ist der Sinn der Automatisierung: ein einmaliger Aufwand bei der Konfiguration, der danach bei jedem weiteren Bild für dich arbeitet.

Wenn du einen Shop betreibst und vermutest, dass dich gerade die Bilder bei Google nach unten ziehen, mache ich bei DawidWeb genau dieses Audit und die Umsetzung regelmäßig: Umwandlung der Mediathek in WebP oder AVIF, korrekte Größen und srcset, Lazy Load ohne das LCP zu beschädigen, bei Bedarf ein CDN und das Aufräumen der Alt-Texte für SEO. Webseiten und Shops baue ich ab 600 Euro, mit über 120 umgesetzten Projekten, und ein Angebot für deine konkrete Umsetzung bekommst du innerhalb von 24 Stunden.