WebP-Bilder in PrestaShop: Einrichtung und Stolperfallen

Was ist WebP und warum es für PrestaShop wichtig ist

WebP ist ein modernes Bildformat, das von Google entwickelt wurde und sowohl verlustbehaftete als auch verlustfreie Komprimierung für Webbilder bietet. Im Vergleich zu traditionellen Formaten wie JPEG und PNG liefert WebP typischerweise 25-35% kleinere Dateigrößen bei vergleichbarer visueller Qualität. Für einen E-Commerce-Shop mit PrestaShop, bei dem Produktseiten oft Dutzende von Bildern enthalten, kann der Umstieg auf WebP das Seitengewicht dramatisch reduzieren, die Ladezeiten verbessern und die Core Web Vitals-Werte steigern — all dies hat direkten Einfluss auf SEO-Rankings und Conversion-Raten.

Im Gegensatz zu älteren Next-Gen-Formaten, die mit der Verbreitung zu kämpfen hatten, hat WebP eine nahezu universelle Browserunterstützung erreicht. Stand 2026 unterstützt jeder große Browser — Chrome, Firefox, Safari, Edge, Opera und deren mobile Pendants — WebP vollständig. Selbst einstige Nachzügler wie ältere Safari-Versionen auf macOS Catalina sind statistisch irrelevant geworden und machen weniger als 0,3% des weltweiten Datenverkehrs aus. Das bedeutet, Sie können WebP-Bilder vertrauensvoll an praktisch alle Besucher ausliefern, ohne sich um Kompatibilitätsprobleme sorgen zu müssen.

Für PrestaShop-Händler sind die Leistungsgewinne erheblich. Ein typischer Produktkatalog mit 1.000 Produkten und je 5 Bildern kann eine Reduzierung der gesamten Bildlast von 500 MB auf unter 350 MB verzeichnen. Auf Produktlistenseiten, die 20-40 Thumbnails anzeigen, bedeutet dies 200-400 KB Einsparung pro Seitenaufruf — genug, um die Metriken Time to First Contentful Paint und Largest Contentful Paint spürbar zu verbessern.

WebP in PrestaShop 1.7 und 8.x aktivieren

PrestaShop 1.7.8+ und alle 8.x-Versionen beinhalten native WebP-Unterstützung. Die Funktion ist in das Bildregenerierungssystem integriert und kann über das Back-Office aktiviert werden. So aktivieren Sie sie:

1. Navigieren Sie zu Design > Bildeinstellungen (in PS 8.x) oder Einstellungen > Bilder (in PS 1.7).
2. Suchen Sie den Bereich Bildgenerierungsoptionen am unteren Ende der Seite.
3. Finden Sie die Einstellung Bildformat und wählen Sie eine der WebP-bezogenen Optionen. PrestaShop bietet typischerweise an: Nur JPEG, Nur PNG, Nur WebP oder JPEG/PNG + WebP (generiert beide Formate).
4. Wählen Sie JPEG/PNG + WebP, wenn Sie Fallback-Kompatibilität wünschen, oder Nur WebP, wenn Sie sicher sind, dass alle Ihre Besucher moderne Browser verwenden.
5. Stellen Sie den WebP-Qualitätsregler ein. Ein Wert zwischen 80 und 85 bietet ein hervorragendes Gleichgewicht zwischen Dateigröße und visueller Qualität für Produktfotografie.
6. Klicken Sie auf Speichern und dann auf Thumbnails regenerieren, um WebP-Versionen aller bestehenden Bilder zu erstellen.

Der Regenerierungsprozess kann bei großen Katalogen erhebliche Zeit in Anspruch nehmen. Für einen Shop mit 5.000+ Produkten rechnen Sie mit 30 Minuten bis mehreren Stunden, abhängig von den Serverressourcen. Es wird dringend empfohlen, die Regenerierung außerhalb der Spitzenzeiten oder über die Kommandozeile durchzuführen, um PHP-Timeout-Probleme zu vermeiden.

CLI-Regenerierung für große Kataloge

Für Shops mit Tausenden von Produkten wird die browserbasierte Regenerierung wahrscheinlich einen Timeout verursachen. Verwenden Sie stattdessen den CLI-Ansatz:

php bin/console prestashop:image:regenerate --format=all

Dieser Befehl läuft ohne die Timeout-Einschränkungen des Webservers. Sie können auch bestimmte Bildtypen gezielt ansprechen:

php bin/console prestashop:image:regenerate --type=products --format=all\nphp bin/console prestashop:image:regenerate --type=categories --format=all

Bei PrestaShop 1.7-Versionen, die den Konsolenbefehl noch nicht haben, können Sie die PHP-Timeout-Limits erhöhen und die Regenerierung über das Admin-Panel durchführen oder ein benutzerdefiniertes PHP-Skript verwenden, das die ImageManager-Klasse direkt aufruft.

Serverkonfiguration: Apache .htaccess-Regeln

Auch nach der Aktivierung der WebP-Generierung in PrestaShop muss Ihr Server konfiguriert werden, um das richtige Format auszuliefern. PrestaShop generiert WebP-Dateien neben den originalen JPEG/PNG-Dateien, aber der Server muss wissen, wann er welches Format ausliefern soll.

Für Apache-Server fügen Sie die folgenden Regeln zu Ihrer .htaccess-Datei im PrestaShop-Stammverzeichnis oder im img/-Verzeichnis hinzu:

<IfModule mod_rewrite.c>\n  RewriteEngine On\n\n  # WebP-Bilder ausliefern, wenn der Browser sie unterstützt und die Datei existiert\n  RewriteCond %{HTTP_ACCEPT} image/webp\n  RewriteCond %{REQUEST_FILENAME} (.+)\\.(jpe?g|png)$\n  RewriteCond %1.webp -f\n  RewriteRule (.+)\\.(jpe?g|png)$ $1.webp [T=image/webp,E=REQUEST_image,L]\n</IfModule>\n\n# Korrekten MIME-Typ für WebP setzen\n<IfModule mod_mime.c>\n  AddType image/webp .webp\n</IfModule>\n\n# Vary-Header zur Vermeidung von Caching-Problemen\n<IfModule mod_headers.c>\n  Header append Vary Accept env=REQUEST_image\n</IfModule>

Diese Regeln funktionieren folgendermaßen: Wenn ein Browser eine JPEG- oder PNG-Datei anfordert, prüft der Server, ob der Browser einen Accept: image/webp-Header sendet. Falls ja und eine .webp-Version der Datei auf der Festplatte existiert, liefert der Server transparent die WebP-Datei stattdessen aus. Der Vary: Accept-Header stellt sicher, dass Caching-Proxys separate Versionen für WebP-fähige und Nicht-WebP-Browser speichern.

Stellen Sie sicher, dass mod_rewrite, mod_mime und mod_headers auf Ihrer Apache-Installation aktiviert sind. Die meisten Shared-Hosting-Umgebungen haben diese standardmäßig aktiviert, Sie können dies aber bei Ihrem Hosting-Anbieter verifizieren.

Nginx-Konfiguration

Für Shops, die auf Nginx laufen, gehört die Konfiguration in Ihren Server-Block oder einen Location-Block innerhalb Ihrer Site-Konfigurationsdatei:

map $http_accept $webp_suffix {\n  default \"\";\n  \"~*image/webp\" \".webp\";\n}\n\nserver {\n  # ... bestehende Konfiguration ...\n\n  location ~* ^(/img/.+)\\.(jpe?g|png)$ {\n    set $img_path $1;\n    add_header Vary Accept;\n    try_files $img_path$webp_suffix $uri =404;\n  }\n}

Die map-Direktive auf HTTP-Ebene prüft, ob der Client einen WebP-kompatiblen Accept-Header sendet, und setzt eine Variable entsprechend. Der location-Block verwendet dann try_files, um zuerst die WebP-Version auszuliefern, und fällt auf das Originalformat zurück, falls die WebP-Datei nicht existiert.

Testen Sie nach der Änderung der Nginx-Konfiguration immer, bevor Sie neu laden:

nginx -t\nnginx -s reload

CDN-Überlegungen

Wenn Sie ein CDN wie Cloudflare, KeyCDN oder Bunny.net vor Ihrem PrestaShop-Shop verwenden, erfordert die WebP-Auslieferung zusätzliche Aufmerksamkeit.

Cloudflare

Cloudflare bietet integrierte WebP-Konvertierung über seine Polish-Funktion an (verfügbar ab dem Pro-Plan). Wenn Polish mit WebP-Konvertierung aktiviert ist, konvertiert Cloudflare Bilder automatisch am Edge zu WebP — das bedeutet, Sie müssen keine WebP-Dateien auf Ihrem Server generieren. Beachten Sie jedoch diese Einschränkungen:

• Polish funktioniert nur für Bilder, die über Cloudflares Proxy ausgeliefert werden (orangefarbene Wolke aktiviert).
• Es konvertiert keine Bilder größer als 10 MB oder Bilder mit bestimmten Farbprofilen.
• Die erstmalige Konvertierung fügt bei der ersten Anfrage Latenz hinzu; nachfolgende Anfragen werden aus dem Cache bedient.
• Wenn Sie auch lokal WebP generieren, kann es zu einer Doppelkonvertierung kommen, was die Qualität leicht verschlechtern kann.

Wenn Sie Ihre eigenen WebP-Dateien über Cloudflare ausliefern möchten, stellen Sie sicher, dass der Vary: Accept-Header korrekt verarbeitet wird. Standardmäßig entfernt Cloudflare den Vary-Header. Möglicherweise müssen Sie eine Cache Rule erstellen oder einen Worker verwenden, um eine korrekte Content-Negotiation sicherzustellen.

Andere CDNs

Die meisten modernen CDNs unterstützen Content-Negotiation basierend auf dem Accept-Header, aber Sie müssen dies explizit aktivieren. Prüfen Sie die Dokumentation Ihres CDN zu „Vary-Header-Unterstützung" oder „Content-Negotiation". Manche CDNs erfordern, dass Sie „Cache nach Accept-Header" in Ihren Caching-Regeln aktivieren. Ohne dies könnte das CDN die erste Version zwischenspeichern, die es sieht (JPEG oder WebP), und sie allen Besuchern ausliefern, unabhängig von der Browserunterstützung.

Bildqualitätseinstellungen

Die Wahl der richtigen WebP-Qualitätseinstellung ist entscheidend. Zu hoch, und Sie verlieren die Dateigröße-Vorteile; zu niedrig, und Produktbilder wirken unscharf oder zeigen Kompressionsartefakte — ein K.O.-Kriterium im E-Commerce.

Hier sind empfohlene Qualitätseinstellungen nach Bildtyp:

• Produktbilder (Groß-/Detailansichten): Qualität 82-88. Produktfotos müssen scharf aussehen, besonders bei Artikeln, bei denen Textur und Detail wichtig sind (Mode, Schmuck, Elektronik). Bei Qualität 85 komprimiert ein typisches 800x800 Produktbild von ~120 KB (JPEG) auf ~80 KB (WebP) ohne sichtbaren Qualitätsverlust.
• Kategorie-Banner und Hero-Bilder: Qualität 78-82. Diese werden typischerweise in größeren Formaten betrachtet, aber mit weniger Aufmerksamkeit für Feinheiten.
• Thumbnails und Listenbilder: Qualität 75-80. Bei kleinen Anzeigegrößen ist niedrigere Qualität weniger auffällig. Ein Thumbnail mit Qualität 75 kann 50-60% kleiner sein als sein JPEG-Äquivalent.
• Logos und Grafiken mit scharfen Kanten: Verwenden Sie verlustfreies WebP oder behalten Sie das PNG-Format. Verlustbehaftete Komprimierung erzeugt sichtbare Artefakte um Text und Grafiken mit harten Kanten.

PrestaShop wendet eine einzige Qualitätseinstellung global an. Wenn Sie unterschiedliche Qualitätsstufen für verschiedene Bildtypen benötigen, müssten Sie die ImageManager-Klasse modifizieren oder ein Drittanbieter-Modul verwenden, das eine granularere Steuerung bietet.

Fallback-Strategien

Obwohl die Browserunterstützung für WebP im Jahr 2026 nahezu universell ist, gilt die Implementierung einer Fallback-Strategie weiterhin als Best Practice, insbesondere wenn Ihr Shop Kunden mit älteren Geräten oder eingeschränkten Unternehmensumgebungen bedient.

Serverseitige Content-Negotiation

Die oben beschriebenen .htaccess- und Nginx-Regeln implementieren serverseitige Content-Negotiation. Dies ist der empfohlene Ansatz, weil er für die Anwendungsschicht transparent ist. Der Browser fordert die ursprüngliche URL an, und der Server entscheidet basierend auf dem Accept-Header, welches Format ausgeliefert wird. Es sind keine Änderungen an Templates oder Frontend-Code erforderlich.

Das HTML-Picture-Element

Ein alternativer Ansatz verwendet das <picture>-Element, um den Browser das beste Format wählen zu lassen:

<picture>\n  <source srcset=\"image.webp\" type=\"image/webp\">\n  <img src=\"image.jpg\" alt=\"Produktname\">\n</picture>

Dies erfordert eine Modifikation der PrestaShop-Templates (Smarty oder Twig, abhängig von Ihrer Version). Obwohl es Ihnen explizite Kontrolle gibt, ist es invasiver und schwieriger über Theme-Updates hinweg zu pflegen. Serverseitige Negotiation wird für PrestaShop-Deployments generell bevorzugt.

PrestaShops eingebautes Fallback

Wenn Sie die Option „JPEG/PNG + WebP" in PrestaShops Bildeinstellungen wählen, generiert das System beide Formate. PrestaShop 8.x handhabt das Fallback automatisch in seinen Kern-Templates und prüft, ob die WebP-Datei existiert, bevor sie referenziert wird. Wenn Sie ein benutzerdefiniertes Theme verwenden, überprüfen Sie, ob die Produktbild-Templates des Themes diesen Dual-Format-Ansatz unterstützen.

Häufige Stolperfallen und wie Sie sie beheben

1. Defekte Bilder nach Aktivierung von WebP

Das häufigste Problem nach der Aktivierung von WebP sind defekte Bilder im gesamten Shop. Dies passiert üblicherweise, weil:

• WebP-Dateien nicht generiert wurden. Die Aktivierung der Einstellung betrifft nur neu hochgeladene Bilder. Sie müssen auf „Thumbnails regenerieren" klicken, um WebP-Versionen bestehender Bilder zu erstellen. Für große Kataloge verwenden Sie den CLI-Befehl.
• Dateiberechtigungen falsch sind. Der Webserver-Benutzer (typischerweise www-data) muss Schreibrechte auf den img/-Verzeichnisbaum haben. Überprüfen Sie nach der Regenerierung die Berechtigungen: find img/ -name \"*.webp\" -exec ls -la {} \\;
• .htaccess-Regeln in Konflikt stehen. PrestaShops Standard-.htaccess enthält Rewrite-Regeln, die mit WebP-Rewrite-Regeln in Konflikt geraten können. Platzieren Sie WebP-Regeln vor PrestaShops Standard-Rewrite-Block, um sicherzustellen, dass sie zuerst ausgewertet werden.

2. Fehlende GD- oder Imagick-Erweiterungen

Die WebP-Generierung erfordert, dass PHP entweder die GD-Bibliothek oder die ImageMagick-Erweiterung mit WebP-Unterstützung kompiliert hat. Zum Prüfen:

php -r \"echo gd_info()['WebP Support'] ? 'GD WebP OK' : 'GD WebP FEHLT';\"

Oder für ImageMagick:

php -r \"echo in_array('WEBP', Imagick::queryFormats()) ? 'Imagick WebP OK' : 'Imagick WebP FEHLT';\"

Wenn die WebP-Unterstützung fehlt, müssen Sie PHP mit den entsprechenden Flags neu kompilieren oder die korrekten Pakete installieren. Auf Debian/Ubuntu: apt-get install libwebp-dev gefolgt von einer Neukompilierung der GD-Erweiterung, oder installieren Sie eine PHP-Version, die WebP-Unterstützung enthält (PHP 7.4+ enthält sie typischerweise standardmäßig).

Auf Shared Hosting: Falls Ihr PHP-Build keine WebP-Unterstützung bietet, kontaktieren Sie Ihren Hosting-Anbieter. Die meisten modernen Hosting-Umgebungen beinhalten WebP-Unterstützung in PHP 8.x-Installationen.

3. Cache-Probleme

Cache-bezogene Probleme gehören zu den frustrierendsten WebP-Problemen:

• Browser-Cache: Nach der Aktivierung von WebP zeigen Browser möglicherweise weiterhin gecachte JPEG/PNG-Versionen an. Empfehlen Sie Nutzern einen Hard-Refresh (Strg+Umschalt+R), aber das löst sich von selbst, wenn gecachte Bilder ablaufen.
• Serverseitiger Cache: Wenn Sie Varnish, Redis oder ein anderes Full-Page-Caching verwenden, muss der Cache nach der Aktivierung von WebP geleert werden. Andernfalls referenzieren gecachte Seiten alte Bild-URLs oder MIME-Typen.
• CDN-Cache: Leeren Sie Ihren CDN-Cache vollständig nach der Aktivierung von WebP. Achten Sie besonders auf CDN-Cache-Schlüssel — wenn das CDN das Caching nicht nach Accept-Header variiert, liefert es möglicherweise WebP an Browser aus, die es nicht unterstützen (oder umgekehrt).
• OPcache: Wenn Sie PHP-Dateien im Rahmen der WebP-Aktivierung modifiziert haben (z.B. benutzerdefinierte ImageManager-Überschreibungen), setzen Sie den OPcache zurück, um sicherzustellen, dass der neue Code wirksam wird.
• PrestaShop Smarty-Cache: Löschen Sie den Smarty-Cache über das Back-Office (Erweiterte Einstellungen > Leistung) oder löschen Sie den Inhalt des var/cache/-Verzeichnisses.

4. Falsche MIME-Typen

Wenn Ihr Server die .webp-Erweiterung nicht erkennt, werden Browser die Bilder nicht rendern können, obwohl die Dateien gültig sind. Stellen Sie sicher, dass Ihre Serverkonfiguration die korrekte MIME-Typ-Zuordnung enthält: image/webp für .webp-Dateien. Die AddType-Direktive im Apache-Abschnitt oben handhabt dies.

5. Bild-Upload-Probleme im Back-Office

PrestaShops Back-Office validiert hochgeladene Bildformate. In manchen Versionen kann das direkte Hochladen eines WebP-Bildes über den Produkteditor mit einem Validierungsfehler fehlschlagen. Dies liegt daran, dass die Whitelist des Upload-Validators WebP möglicherweise nicht enthält. Prüfen Sie die erlaubten Erweiterungen unter Erweiterte Einstellungen > Verwaltung oder in der entsprechenden Konfiguration.

6. Inkompatibilität mit Drittanbieter-Modulen

Manche Drittanbieter-Module (insbesondere Slider-, Galerie-Module und Produktbild-Zoom-Module) verwenden fest codierte Bilddateierweiterungen oder unterstützen WebP nicht. Testen Sie nach der Aktivierung von WebP alle Module, die Bilder anzeigen. Häufige Symptome sind fehlende Thumbnails in Slider-Modulen oder fehlerhafte Zoom-Funktionalität. Kontaktieren Sie den Modulentwickler für Updates oder stellen Sie sicher, dass Ihre serverseitige Content-Negotiation das Fallback korrekt handhabt.

WebP-Auslieferung testen

Überprüfen Sie nach der Konfiguration, dass WebP-Bilder tatsächlich ausgeliefert werden. Hier sind mehrere Methoden:

Browser-Entwicklertools

1. Öffnen Sie Ihren Shop in Chrome oder Firefox.
2. Öffnen Sie die DevTools (F12) und gehen Sie zum Netzwerk-Tab.
3. Filtern Sie nach dem Typ Img.
4. Laden Sie die Seite neu.
5. Klicken Sie auf eine beliebige Bildanfrage und prüfen Sie die Antwort-Header. Der Content-Type sollte image/webp sein.
6. Prüfen Sie auch die Typ-Spalte in der Netzwerkliste — sie sollte für konvertierte Bilder „webp" anzeigen.

Kommandozeilen-Test

Verwenden Sie curl, um zu verifizieren, dass die Content-Negotiation korrekt funktioniert:

# Anfrage mit WebP-Unterstützung\ncurl -s -I -H \"Accept: image/webp,image/*\" https://ihrshop.de/img/p/1/2/3/456-home_default.jpg | grep Content-Type\n# Erwartet: Content-Type: image/webp\n\n# Anfrage ohne WebP-Unterstützung\ncurl -s -I -H \"Accept: image/jpeg\" https://ihrshop.de/img/p/1/2/3/456-home_default.jpg | grep Content-Type\n# Erwartet: Content-Type: image/jpeg

Online-Tools

Google PageSpeed Insights und Lighthouse markieren beide Bilder, die nicht in Next-Gen-Formaten ausgeliefert werden. Führen Sie ein Lighthouse-Audit auf Ihren Produktseiten durch — wenn WebP korrekt konfiguriert ist, sollten Sie die Empfehlung „Bilder in Next-Gen-Formaten bereitstellen" nicht mehr sehen.

Leistungsauswirkung

Die reale Leistungsauswirkung von WebP auf einen PrestaShop-Shop hängt von der Kataloggröße und der Seitenzusammensetzung ab, aber typische Verbesserungen umfassen:

• Reduzierung des Gesamtseitengewichts: 15-30% auf Produktlistenseiten und 10-20% auf Produktdetailseiten, wo Bilder den Großteil der heruntergeladenen Bytes ausmachen.
• Largest Contentful Paint (LCP): Verbesserung um durchschnittlich 200-600ms, da das Hauptproduktbild schneller lädt. Dies ist eines der drei Core Web Vitals und beeinflusst direkt die Suchrankings.
• Time to Interactive (TTI): Marginale Verbesserung, da das Laden von Bildern mit der JavaScript-Ausführung um Bandbreite konkurriert, aber nicht um CPU-Ressourcen.
• Server-Bandbreiteneinsparungen: Für einen Shop mit 100.000 Seitenaufrufen pro Monat kann WebP die monatliche Bandbreitennutzung um 20-50 GB reduzieren, was die Hosting-Kosten potenziell senkt.
• Mobile Leistung: Die signifikantesten Gewinne zeigen sich auf mobilen Verbindungen, wo reduzierte Bildgrößen sich direkt in schnellere Ladezeiten auf 4G/5G-Netzen übersetzen. Googles Mobile-First-Indexierung macht dies besonders wichtig.

Bedenken Sie, dass die WebP-Generierung während der Bildverarbeitung (Uploads und Regenerierung) zusätzliche CPU-Last erzeugt. Auf leistungsschwachem Shared Hosting kann die Regenerierung von Thumbnails für einen großen Katalog den Server vorübergehend verlangsamen. Planen Sie die Regenerierung für verkehrsschwache Zeiten.

Zusammenfassende Checkliste

Um WebP erfolgreich in Ihrem PrestaShop-Shop einzusetzen, befolgen Sie diese Checkliste:

1. Überprüfen Sie, dass PHP GD oder ImageMagick mit WebP-Unterstützung hat.
2. Aktivieren Sie die WebP-Generierung in den PrestaShop-Bildeinstellungen (verwenden Sie JPEG/PNG + WebP für Sicherheit).
3. Setzen Sie die Qualität auf 82-85 für das optimale Gleichgewicht.
4. Regenerieren Sie alle Thumbnails (verwenden Sie CLI für große Kataloge).
5. Fügen Sie serverseitige Content-Negotiation-Regeln hinzu (.htaccess oder Nginx-Konfiguration).
6. Konfigurieren Sie Ihr CDN so, dass es den Cache nach Accept-Header variiert.
7. Leeren Sie alle Caches (Browser, Server, CDN, Smarty, OPcache).
8. Testen Sie die Auslieferung mit Browser-DevTools und curl.
9. Überprüfen Sie, ob Drittanbieter-Module Bilder korrekt anzeigen.
10. Führen Sie ein Lighthouse-Audit durch, um zu bestätigen, dass keine Warnungen zu „Next-Gen-Formaten" mehr erscheinen.

WebP ist für wettbewerbsfähigen E-Commerce nicht mehr optional. Mit PrestaShops integrierter Unterstützung und unkomplizierter Serverkonfiguration gibt es keinen Grund, weiterhin überdimensionierte JPEG- und PNG-Dateien auszuliefern. Die Einrichtung dauert weniger als eine Stunde, und die Leistungsvorteile sind sofort und messbar.