PrestaShop-Bildoptimierung: Alt-Tags, Lazy Loading und Seitengeschwindigkeit

Bilder sind die schwerste Last auf fast jedem PrestaShop-Shop, mit dem ich gearbeitet habe. Produktfotos, Kategorie-Banner, Werbegrafiken — auf einer typischen Produktlistenseite machen Bilder 50-70% des gesamten Seitengewichts aus. Laut HTTP-Archive-Daten haben sich die medianen Bild-Bytes auf Mobilseiten zwischen 2011 und 2025 mehr als verzehnfacht (Quelle: NitroPack). Das ist kein Trend — das ist ein Wettrüsten gegen die Seitengeschwindigkeit.

Und bei der Seitengeschwindigkeit geht es längst nicht mehr nur um die Nutzererfahrung. Bilder sind auf 85% der Desktop-Seiten und 76% der Mobilseiten für das Largest Contentful Paint (LCP) Element verantwortlich (Quelle: MDN). Ihr Produkt-Hauptbild ist mit ziemlicher Sicherheit Ihr LCP-Element — das bedeutet, Ihre Bildoptimierungsstrategie bestimmt direkt, ob Google Ihre Core Web Vitals als „gut", „verbesserungswürdig" oder „schlecht" einstuft.

Dieser Leitfaden behandelt alles, was ich bei der Bildoptimierung Dutzender PrestaShop-Shops gelernt habe: Formatauswahl mit echten Dateigrößen, Komprimierungsqualitätseinstellungen, native Lazy-Loading-Implementierung, das fetchpriority-Attribut, das die meisten Shops noch nicht nutzen, Core Web Vitals-Auswirkungen, PrestaShop-Bildregenerierung und tatsächliche Vorher-Nachher-Zahlen aus Produktivshops.

Bildformate: JPEG vs. WebP vs. AVIF — mit echten Zahlen

Lassen Sie mich die Formatdebatte mit echten Daten beenden. Ich habe dasselbe 800x800 Produktfoto (eine Ledergeldbörse auf weißem Hintergrund — typisches E-Commerce-Foto) in jedem Format bei vergleichbarer visueller Qualität getestet:

Die Zahlen sprechen für sich. Aber die Formatauswahl hängt nicht nur von Komprimierungsverhältnissen ab — es geht darum zu wissen, welches Format wo eingesetzt wird.

JPEG: Die Basislinie

JPEG bleibt der sichere Standard. Universelle Browser-Unterstützung, vorhersehbares Rendering und gut verstandenes Komprimierungsverhalten. Für Shops, die keine Formatverhandlung implementieren können (unterschiedliche Formate an verschiedene Browser ausliefern), ist JPEG mit Qualität 80-85 völlig akzeptabel. Über 85 steigt die Dateigröße dramatisch bei nahezu unsichtbaren Qualitätsgewinnen — die meisten Menschen können JPEG 85 nicht von JPEG 100 bei einem Produktfoto unterscheiden.

WebP: Der praktische Gewinner

WebP liefert 25-35% Dateigrößenreduktion gegenüber JPEG bei gleichwertiger visueller Qualität. Mit 97% Browser-Unterstützung im Jahr 2026 — jeder moderne Browser einschließlich Safari — gibt es keinen nennenswerten Grund mehr, WebP als Ihr Hauptformat zu meiden. Die optimale Qualitätseinstellung für WebP liegt bei 75-85, wo Sie das beste Gleichgewicht zwischen Komprimierung und visueller Qualität erzielen.

Für PrestaShop-Shops ist WebP das Format, das ich heute als Standard-Produktionsformat empfehle. Die Lücke bei der Browser-Unterstützung ist vernachlässigbar, und die Einsparungen sind erheblich.

AVIF: Der Performance-Spitzenreiter

AVIF liefert bis zu 50% kleinere Dateien als JPEG — ungefähr doppelt so viel Ersparnis wie WebP. Bei niedrigen Bitraten (stark komprimierte Bilder) behält AVIF eine deutlich bessere Qualität als JPEG und WebP bei und produziert weniger Komprimierungsartefakte. Die empfohlene Qualitätseinstellung liegt bei 60-70, was typischerweise gleichwertig zu JPEG 85 aussieht (Quelle: Two Row Studio).

Der Haken: Die Browser-Unterstützung liegt 2026 bei etwa 92%. Das bedeutet, dass ungefähr 1 von 12 Besuchern AVIF möglicherweise nicht unterstützt. Die Lösung ist das <picture>-Element mit Format-Fallbacks:

<picture>
  <source srcset="product-image.avif" type="image/avif">
  <source srcset="product-image.webp" type="image/webp">
  <img src="product-image.jpg" alt="Blue leather wallet - front view with card slots"
       width="800" height="800" loading="lazy">
</picture>

Der Browser wählt das erste Format, das er unterstützt. AVIF-fähige Browser erhalten die kleinste Datei. WebP-fähige Browser erhalten die nächstbeste Option. Alle anderen fallen auf JPEG zurück. Null Kompatibilitätsprobleme, maximale Komprimierung für jeden Besucher.

PNG: Nur für Grafiken

PNG verwendet verlustfreie Komprimierung und erzeugt dramatisch größere Dateien bei Fotografien. Verwenden Sie PNG niemals für Produktfotos — es ist 3-5x größer als JPEG ohne sichtbaren Qualitätsvorteil. PNG ist richtig für Logos, Icons und Grafiken mit Text, scharfen Kanten oder transparentem Hintergrund. Für alles andere verwenden Sie WebP oder AVIF.

Komprimierung in der Praxis: Vorher und Nachher

So sieht Bildoptimierung auf einer echten PrestaShop-Kategorieseite mit 20 Produkten aus:

Vor der Optimierung

• 20 Produktbilder als PNG (Original-Uploads): 11,6 MB gesamt
• Kategorie-Banner: 1,8 MB (4000x1000 PNG)
• Gesamte Bild-Last: 13,4 MB
• Seitenladezeit: 6,2 Sekunden (4G mobil)
• LCP: 4,8 Sekunden

Nach der Optimierung

• 20 Produktbilder als WebP (Qualität 80, skaliert auf 600x600): 1,4 MB gesamt
• Kategorie-Banner als WebP (skaliert auf 1920x480): 95 KB
• Gesamte Bild-Last: 1,5 MB
• Seitenladezeit: 1,8 Sekunden (4G mobil)
• LCP: 1,6 Sekunden

Das ist eine 89%ige Reduktion der Bild-Last und eine 67%ige Verbesserung des LCP — von „schlecht" zu „gut" auf Googles Core Web Vitals-Skala, allein durch Bilder.

Die beiden größten Gewinne waren nicht exotisch: Auf die tatsächlichen Anzeigemaße skalieren (niemand braucht ein 4000px-Bild, das bei 600px angezeigt wird) und von PNG zu WebP konvertieren. Komprimierung reduziert Dateigrößen um 50-80% durch verlustbehaftete Optimierung (Quelle: NitroPack).

Alt-Tags: Mehr als nur eine SEO-Checkbox

Jedes Bild in Ihrem Shop braucht ein beschreibendes Alt-Attribut. Das ist nicht optional — es erfüllt drei verschiedene Funktionen:

1. Barrierefreiheit: Screenreader verwenden Alt-Texte, um Bilder für sehbehinderte Nutzer zu beschreiben. In vielen Rechtsordnungen (EU, USA, UK) ist Web-Barrierefreiheit eine gesetzliche Anforderung. Ein E-Commerce-Shop mit leeren Alt-Tags ist potenziell nicht konform.
2. SEO: Suchmaschinen können Bilder nicht sehen. Alt-Text ist die Art und Weise, wie Google versteht, was ein Bild darstellt — und das bestimmt, ob es in der Google-Bildersuche erscheint. Bei Produktbildern kann die Bildersuche 10-15% des gesamten organischen Traffics ausmachen.
3. Fallback: Wenn ein Bild nicht geladen werden kann (langsame Verbindung, CDN-Ausfall, fehlerhafter Pfad), wird stattdessen der Alt-Text angezeigt und bewahrt den Kontext für den Nutzer.

Alt-Tags schreiben, die wirklich funktionieren

Ich habe Hunderte PrestaShop-Shops überprüft, und dieselben Alt-Tag-Fehler tauchen überall auf:

Schlecht:

alt=""                          — Leer, liefert keine Information
alt="image1"                    — Bedeutungsloser Dateiname
alt="product"                   — Zu generisch
alt="buy cheap blue leather wallet best price free shipping" — Keyword-Stuffing

Gut:

alt="Blue leather bifold wallet, front view showing card slots"
alt="Hand-stitched leather wallet in navy, open to show 6 card pockets"
alt="Wallet packaging — gift box with magnetic closure"

Die Formel: Produktname + unterscheidendes Merkmal + Kontext. Halten Sie es unter 125 Zeichen. Beschreiben Sie, was das Bild tatsächlich zeigt — nicht, wofür Sie ranken möchten.

Bei einem Produkt mit 5 Bildern sollte jeder Alt-Tag einzigartig sein und diese spezifische Perspektive oder Ansicht beschreiben. Nicht fünf Kopien des Produktnamens.

Alt-Tags in PrestaShop automatisieren

Alt-Tags manuell für 5.000 Produkte mit jeweils 3-5 Bildern zu schreiben, ist nicht realistisch. Das sind 15.000-25.000 einzelne Alt-Tags. Verwenden Sie ein Modul wie Automatic SEO Images Alt Tags, um Alt-Tags aus Produktdaten zu generieren — Produktname, Kategorie, wichtige Attribute — und überprüfen und verbessern Sie dann manuell die Produkte mit dem meisten Traffic.

Automatisierte Alt-Tags sind nicht perfekt, aber sie sind unendlich besser als leere Alt-Attribute im gesamten Katalog.

Lazy Loading: Der größte Quick Win für die Seitengeschwindigkeit

Lazy Loading verzögert das Herunterladen von Bildern, bis sie kurz davor sind, in den Viewport (den sichtbaren Bereich des Bildschirms) zu gelangen. Auf einer Kategorieseite mit 40 Produkten sind nur die ersten 4-8 ohne Scrollen sichtbar — Lazy Loading bedeutet, dass die anderen 32-36 Bilder keine Bandbreite verbrauchen, bis der Nutzer zu ihnen scrollt.

Natives Lazy Loading: Der moderne Ansatz

Da HTML Lazy Loading mittlerweile nativ unterstützt, besteht die Implementierung aus einem einzigen Attribut:

<img src="product.webp" alt="Blue leather wallet"
     width="600" height="600" loading="lazy">

Das war's. Keine JavaScript-Bibliothek, keine Konfiguration, kein Polyfill. Das loading="lazy"-Attribut wird Stand 2026 von 95% der Browser unterstützt. Browser, die es nicht unterstützen, laden das Bild einfach normal — Graceful Degradation ohne jeglichen Nachteil.

Der kritische Fehler: Lazy Loading für Ihr LCP-Bild

Dies ist der häufigste Performance-Fehler, den ich sehe, und das MDN Web Docs-Team weist ausdrücklich darauf hin: 16% der Seiten wenden Lazy Loading auf ihr LCP-Bild an, was eines der schädlichsten Performance-Muster im Web ist (Quelle: MDN).

Ihr LCP-Bild — typischerweise das Produkt-Hauptbild auf einer Produktseite oder das erste sichtbare Produktbild auf einer Kategorieseite — muss so schnell wie möglich laden. Lazy Loading fügt eine künstliche Verzögerung hinzu: Der Browser muss zuerst das Seitenlayout rendern, dann berechnen, dass das Bild im Viewport ist, und erst dann mit dem Download beginnen. Das fügt 200-500ms zu Ihrer LCP-Zeit hinzu.

Der richtige Ansatz für Ihr LCP-Bild:

<img src="hero-product.webp" alt="Blue leather wallet - main product image"
     width="800" height="800"
     loading="eager"
     fetchpriority="high">

Das loading="eager"-Attribut (der Browser-Standard) stellt sofortiges Laden sicher. Das fetchpriority="high"-Attribut weist den Browser an, dieses Bild gegenüber anderen Ressourcen wie Stylesheets und Skripten zu priorisieren. Stand 2026 wird fetchpriority in allen modernen Browsern unterstützt, dennoch nutzen nur 17% der Seiten es für ihr LCP-Bild (Quelle: Two Row Studio). Das ist eine massive verpasste Optimierung.

Die Regel: Eager oberhalb des Falzes, Lazy darunter

• Produkt-Hauptbild: loading="eager" fetchpriority="high"
• Erste Reihe der Kategorieseite (typischerweise 3-4 Bilder): loading="eager"
• Alles andere: loading="lazy"
• Logo und Navigationsbilder: loading="eager" (immer sichtbar)

Die Implementierung dieses Musters in einem PrestaShop-Shop erfordert typischerweise die Anpassung des Produkt-Templates und des Kategorie-Listing-Templates. Ein Modul wie Automatic SEO Images Lazy Tags erledigt dies automatisch, wendet Lazy Loading auf Bilder unterhalb des Falzes an und behält kritische Bilder als Eager bei.

JavaScript-basiertes Lazy Loading: Wenn Sie mehr Kontrolle brauchen

Natives Lazy Loading deckt 95% der Anwendungsfälle ab. Die verbleibenden 5% — Fälle, in denen Sie Einblendanimationen, progressives Laden mit verschwommenen Platzhaltern oder spezifische Schwellenwertkontrolle benötigen — erfordern einen JavaScript-Ansatz. Bibliotheken wie lazysizes oder lozad.js bieten diese Funktionen bei guter Performance.

Allerdings fügt JavaScript-basiertes Lazy Loading seinen eigenen Overhead hinzu (Skript-Download, Parsing und Ausführungszeit). Für die meisten PrestaShop-Shops ist natives Lazy Loading ausreichend und vorzuziehen.

Layout-Verschiebungen (CLS) mit korrekten Bildmaßen verhindern

Cumulative Layout Shift (CLS) misst, wie stark sich Seiteninhalte während des Ladens unerwartet verschieben. Bilder ohne explizite width- und height-Attribute sind die Hauptursache für CLS auf E-Commerce-Seiten — wenn jedes Bild geladen wird, berechnet der Browser das Layout neu und verschiebt Inhalte.

Die Lösung ist einfach: Fügen Sie immer width- und height-Attribute bei jedem <img>-Tag ein:

<img src="product.webp" alt="Blue leather wallet"
     width="600" height="600" loading="lazy">

Mit CSS können Sie Bilder weiterhin responsiv gestalten und gleichzeitig Layout-Verschiebungen verhindern:

img {
  max-width: 100%;
  height: auto;
}

Der Browser verwendet die width- und height-Attribute, um das Seitenverhältnis zu berechnen, bevor das Bild geladen wird, und reserviert den korrekten Platz im Layout. Das Hinzufügen von width- und height-Attributen eliminiert die meisten CLS-Probleme vollständig (Quelle: NitroPack).

Responsive Bilder: Die richtige Größe für jedes Gerät liefern

Ein 1200px-Produktbild, das auf einem Mobiltelefon bei 300px angezeigt wird, verschwendet 75% der heruntergeladenen Bytes. Responsive Bilder lösen dieses Problem, indem sie mehrere Größen bereitstellen und den Browser die passendste auswählen lassen:

<img srcset="product-300w.webp 300w,
             product-600w.webp 600w,
             product-900w.webp 900w,
             product-1200w.webp 1200w"
     sizes="(max-width: 576px) 300px,
            (max-width: 768px) 600px,
            900px"
     src="product-900w.webp"
     alt="Blue leather wallet"
     width="900" height="900"
     loading="lazy">

Das srcset-Attribut listet verfügbare Bilddateien mit ihren Breiten auf. Das sizes-Attribut teilt dem Browser mit, welche Anzeigegröße bei verschiedenen Viewport-Breiten zu erwarten ist. Der Browser kombiniert diese Informationen mit dem Gerätepixelverhältnis, um die optimale Datei auszuwählen.

PrestaShop generiert mehrere Bildgrößen über seine Bildtyp-Konfiguration (Back Office → Design → Bildeinstellungen). Stellen Sie sicher, dass Sie Bildtypen für die Größen konfiguriert haben, die Ihr Theme tatsächlich verwendet. Gängige Größen für Produktbilder:

• Kleines Thumbnail: 125x125 (Warenkorb, Mini-Warenkorb)
• Mittel: 300x300 (Kategorielisten auf Mobilgeräten)
• Groß: 600x600 (Kategorielisten auf Desktop)
• Extra groß: 1200x1200 (Produktseiten-Hauptbild, Zoom)

PrestaShop-Bildregenerierung

Nach dem Ändern von Bildtyp-Dimensionen oder dem Hinzufügen neuer Bildtypen müssen Sie alle Produktbilder regenerieren. PrestaShop muss neue Thumbnails in den aktualisierten Größen erstellen.

Über das Back Office

Navigieren Sie zu Design → Bildeinstellungen und klicken Sie unten auf der Seite auf „Thumbnails regenerieren". Wählen Sie aus, welche Bildtypen regeneriert werden sollen (Produkte, Kategorien, Marken) und ob alte, ungenutzte Thumbnails gelöscht werden sollen.

Bei großen Katalogen kann dieser Prozess im Browser einen Timeout verursachen. Der Back-Office-Ansatz funktioniert für Shops mit unter 2.000 Produkten.

Per Kommandozeile (große Kataloge)

Für Shops mit Tausenden von Produkten verwenden Sie den CLI-Befehl, der keine Browser-Timeout-Beschränkungen hat:

php bin/console prestashop:image:regenerate --type=products

Verfügbare Optionen:

• --type=products — nur Produktbilder regenerieren
• --type=categories — Kategoriebilder regenerieren
• --type=manufacturers — Marken-/Herstellerbilder regenerieren
• Ohne --type werden alle Bildtypen regeneriert

Bei sehr großen Katalogen (10.000+ Produkte mit jeweils mehreren Bildern) kann dieser Prozess Stunden dauern. Führen Sie ihn außerhalb der Stoßzeiten durch und überwachen Sie die Serverressourcen — Bildverarbeitung ist CPU-intensiv.

Konvertierung zu WebP

PrestaShop 1.7.8+ und 8.x unterstützen die WebP-Bilderzeugung nativ. Aktivieren Sie sie unter Design → Bildeinstellungen → Bilderzeugungsoptionen. Wenn aktiviert, generiert PrestaShop WebP-Versionen neben den JPEG/PNG-Originalen während der Regenerierung.

Falls Ihre PrestaShop-Version keine native WebP-Generierung unterstützt, können serverseitige Lösungen wie mod_pagespeed (Apache) oder Bild-CDNs wie Cloudflares Polish-Funktion Bilder on-the-fly konvertieren. Ein spezialisiertes Bildoptimierungsmodul wie Performance Revolution kann Formatkonvertierung, Komprimierung und Lazy Loading in einem Paket erledigen.

EXIF-Metadaten entfernen

Produktfotos, die mit Kameras oder Smartphones aufgenommen wurden, enthalten EXIF-Metadaten — Kameramodell, GPS-Koordinaten, Zeitstempel, Farbprofile. Diese Daten fügen 50-200 KB pro Bild hinzu und bieten Ihren Shop-Besuchern keinerlei Mehrwert. Das Entfernen von EXIF-Daten ist eine kostenlose Dateigrößenreduktion, die keine sichtbare Qualitätsänderung erfordert.

Die meisten Bildkomprimierungstools entfernen EXIF-Daten automatisch. Wenn Sie Bilder vor dem Upload manuell bearbeiten, können Tools wie ImageOptim (Mac), FileOptimizer (Windows) oder das Kommandozeilentool exiftool Metadaten aus Ihrer gesamten Bildbibliothek stapelweise entfernen.

Hinweis: PrestaShop entfernt EXIF-Daten beim Upload standardmäßig nicht. Welche Metadaten Ihre Originalbilder enthalten, wird in allen generierten Thumbnails beibehalten.

Core Web Vitals: Die Zahlen verstehen

Googles Core Web Vitals sind die Performance-Metriken, die sich direkt auf Ihre Suchrankings auswirken. Bildoptimierung beeinflusst zwei der drei Metriken:

Largest Contentful Paint (LCP)

LCP misst, wie lange es dauert, bis das größte sichtbare Element gerendert wird — auf E-Commerce-Seiten fast immer ein Bild. Googles Schwellenwerte:

• Gut: Unter 2,5 Sekunden
• Verbesserungswürdig: 2,5 bis 4,0 Sekunden
• Schlecht: Über 4,0 Sekunden

Die Optimierung Ihres LCP-Bildes — korrektes Format, passende Größe, fetchpriority="high", kein Lazy Loading, bei Bedarf Preloading — ist die wirkungsvollste Maßnahme für die Core Web Vitals Ihres Shops. Fallstudien zeigen dramatische Ergebnisse: NDTV verbesserte den LCP um 55%, was zu einem Rückgang der Absprungrate um 50% führte (Quelle: NitroPack).

Cumulative Layout Shift (CLS)

CLS misst die visuelle Stabilität. Googles Schwellenwerte:

• Gut: Unter 0,1
• Verbesserungswürdig: 0,1 bis 0,25
• Schlecht: Über 0,25

Für Bilder ist die Lösung immer dieselbe: width- und height-Attribute angeben. Damit tragen Bilder praktisch nichts zum CLS bei.

Die geschäftliche Auswirkung

Falls die technischen Metriken abstrakt wirken, betrachten Sie die Geschäftsdaten:

• Walmart: 1 Sekunde Verbesserung der Ladezeit = 2% mehr Conversions
• Zitmaxx Wonen: Perfekter PageSpeed-Score + unter 4 Sekunden Ladezeit = 50,2% mehr mobile Conversions
• Google: Seiten, die alle Core Web Vitals-Schwellenwerte erfüllen, verzeichnen 24% weniger Seitenabbrüche

Bildoptimierung ist nicht nur eine SEO-Aufgabe — es ist eine Conversion-Rate-Optimierungsaufgabe, die sich direkt auf den Umsatz auswirkt.

Fortschritt messen mit PageSpeed Insights

Vor und nach jeder Optimierungsarbeit lassen Sie Ihre wichtigsten Seiten durch Google PageSpeed Insights laufen. Konzentrieren Sie sich auf:

1. LCP-Score — Lädt Ihr Hauptbild schnell genug?
2. CLS-Score — Verursachen Bilder Layout-Verschiebungen?
3. Audit „Bilder richtig dimensionieren" — Liefern Sie übergroße Bilder aus?
4. Audit „Bilder in modernen Formaten bereitstellen" — Nutzen Sie WebP/AVIF?
5. Audit „Bilder effizient codieren" — Sind die Komprimierungsstufen optimal?
6. Audit „Offscreen-Bilder zurückstellen" — Funktioniert Lazy Loading korrekt?

Führen Sie sowohl Mobile- als auch Desktop-Tests durch. Mobile ist das, was für Rankings zählt (Google nutzt Mobile-First-Indexierung), aber Desktop-Ergebnisse sind wichtig für die Nutzererfahrung Ihres tatsächlichen Traffics.

Prüfen Sie auch Ihren Core Web Vitals-Bericht in der Google Search Console (Nutzererfahrung → Core Web Vitals). Dieser zeigt Felddaten von echten Nutzern — genauer als Labortests, aber mit einem gleitenden 28-Tage-Durchschnitt, was bedeutet, dass Verbesserungen Zeit brauchen, um sich im Bericht widerzuspiegeln.

Bild-Sitemap-Integration

Bildoptimierung endet nicht bei Komprimierung und Ladestrategie. Damit Ihre Bilder in der Google-Bildersuche erscheinen, ist eine ordnungsgemäße Erkennung erforderlich. Binden Sie Ihre Produktbilder in eine Bild-Sitemap ein (oder verwenden Sie Bild-Erweiterungen in Ihrer Produkt-Sitemap). Der Advanced SEO Sitemap Builder kann automatisch Bild-Sitemaps aus Ihrem PrestaShop-Produktkatalog generieren.

Details zur Bild-Sitemap-Syntax und -Struktur finden Sie in unserem vollständigen Leitfaden zu XML-Sitemaps.

Die vollständige Bildoptimierungs-Checkliste für PrestaShop

Hier ist die priorisierte Checkliste, die ich für jeden PrestaShop-Shop befolge, den ich optimiere:

1. Quellbilder auf maximale Anzeigegröße skalieren — Kein Bild sollte bei Produktbildern größer als 1200px an der längsten Seite sein (2x die 600px-Anzeigegröße für Retina-Bildschirme).
2. Zu WebP konvertieren — WebP-Generierung in den PrestaShop-Bildeinstellungen aktivieren und alle Thumbnails regenerieren.
3. Komprimierungsqualität auf 80 setzen — Sowohl für JPEG als auch WebP. Qualität über 85 fügt Dateigröße mit unmerklichem visuellen Nutzen hinzu.
4. width und height bei allen img-Tags angeben — Verhindert CLS. Ihre Theme-Templates sollten diese Attribute enthalten.
5. Lazy Loading implementieren — loading="lazy" auf allen Bildern außer der ersten sichtbaren Reihe und Navigationsbildern.
6. fetchpriority="high" zum LCP-Bild hinzufügen — Ihr Produkt-Hauptbild und das erste Produktbild der Kategorieseite.
7. Beschreibende Alt-Tags schreiben — Mit einem Modul automatisieren, dann manuell die Top 100 Produkte nach Traffic verbessern.
8. EXIF-Metadaten entfernen — Ein Komprimierungstool verwenden, das Metadaten automatisch entfernt.
9. Responsive Bilder implementieren (srcset) — Passende Größen für Mobile, Tablet und Desktop liefern.
10. AVIF mit Fallbacks in Betracht ziehen — Für Shops, in denen maximale Komprimierung wichtig ist und die Implementierung des <picture>-Elements machbar ist.
11. Bilder in Sitemap aufnehmen — Eine Bild-Sitemap für die Auffindbarkeit in der Google-Bildersuche generieren.
12. Mit PageSpeed Insights testen — Überprüfen, ob alle bildbezogenen Audits auf Mobile und Desktop bestanden werden.

Fazit

Bildoptimierung ist die seltene SEO-Aufgabe, die allen Beteiligten nützt. Nutzer erhalten schnellere Seiten und bessere Barrierefreiheit. Google erhält saubere Signale für die Bildersuche und Core Web Vitals-Bewertung. Ihr Server verarbeitet weniger Bandbreite. Ihre Conversion-Rate steigt, weil Seiten schneller laden. Und Ihre Hosting-Rechnung könnte sogar sinken.

Beginnen Sie mit den größten Gewinnen: Übergroße Bilder skalieren, zu WebP konvertieren und Lazy Loading mit der richtigen Eager/Lazy-Aufteilung implementieren. Diese drei Änderungen allein können Ihr Seitengewicht um 70% oder mehr reduzieren. Dann verfeinern Sie weiter — fetchpriority, responsive Bilder, AVIF mit Fallbacks, strukturierte Alt-Tags, Bild-Sitemaps.

Die Shops, die ich am besten bei PageSpeed abschneiden sehe, machen nichts Exotisches. Sie machen die Grundlagen korrekt und konsequent auf jeder Seite im Katalog. Das ist das ganze Geheimnis.