Die aktivierte WebP-Konvertierung entscheidet nicht darüber, welches Bild der Browser lädt. Prüfen Sie die tatsächliche Anfrage im Tab „Network“: die gewählte URL, den Header Content-Type, die Abmessungen und die Größe der Antwort. Erst dann stellen Sie fest, ob das Problem im Fehlen der richtigen Variante, in einer Serverregel, im Cache oder in einem zu großen Bild liegt.
Dieser Leitfaden richtet sich an PrestaShop-Shopbetreiber, die WebP bereits nutzen, aber weiterhin große Bilder oder ein schwaches Performance-Ergebnis sehen. Er enthält einen realen, kontrollierten Test mit drei Illustrationen sowie eine Methode, die Dateikonvertierung von der Auslieferung an den Kunden zu trennen.
1. Beginnen Sie mit dem Bild, das auf einer konkreten Seite sichtbar ist
Wählen Sie ein Bild auf der Produktseite oder in der Produktliste aus. Beginnen Sie nicht mit einer zufälligen Datei im Serververzeichnis: Das Theme kann ein anderes Vorschaubild, eine Variante für Displays mit höherer Pixeldichte oder eine URL vom CDN verwenden. Das WebP des Originals ersetzt nicht automatisch alle benötigten Größen.
Öffnen Sie die Entwicklertools, wechseln Sie zu „Network“, deaktivieren Sie für den Test den Cache und laden Sie die Seite neu. Wählen Sie den Bildfilter. Bei lazy geladenen Bildern scrollen Sie bis zur untersuchten Stelle. Notieren Sie die URL, den Antworttyp, die Größe und die Information, ob die Daten tatsächlich aus dem Netzwerk geladen wurden. Diese Optionen beschreibt die Network-Dokumentation in Chrome DevTools.
Vergleichen Sie keinen vollständigen JPEG-Download mit einer WebP-Zeile, die als memory cache markiert ist. Ein solches Ergebnis beschreibt andere Bedingungen. Ebenso bedeutet ein kleiner Transfer bei einer 304-Antwort nicht, dass die Bilddatei selbst plötzlich nur wenige Bytes groß ist.
2. Eine .jpg-Adresse kann WebP zurückgeben
Im Quellcode von WebP Pro 2.1.3 kann die Bildauslieferung über Apache-Regeln funktionieren: Eine Anfrage nach JPG oder PNG wird auf eine vorhandene WebP-Variante umgeschrieben, wenn der Browser deren Unterstützung angibt. Die im HTML sichtbare Adresse kann daher weiterhin auf .jpg enden, während die Antwort den Typ image/webp hat.
Deshalb reicht die bloße Ansicht des Seitenquelltexts nicht für die Schlussfolgerung „WebP funktioniert nicht“ aus. Prüfen Sie das Format der erhaltenen Antwort. Andererseits beweisen weder die Endung .webp in den Einstellungen noch das Vorhandensein der Datei auf dem Datenträger, dass die entsprechende Regel auf dem Server, der den Shop bedient, tatsächlich ausgeführt wird.
So interpretieren Sie die Beobachtung im Browser
Beobachtung
Mögliche Schlussfolgerung
Nächster Schritt
URL .jpg, Content-Type image/webp
Der Server hat WebP ausgeliefert, obwohl die Quelladresse beibehalten wurde.
Prüfen Sie die Abmessungen und die Byte-Größe dieser Variante.
URL .jpg, Content-Type image/jpeg
In diesem Test wurde JPEG ausgeliefert.
Prüfen Sie das Vorhandensein der genauen WebP-Variante, die Serverregeln und den Cache.
WebP existiert, betrifft aber eine andere Größe
Die Konvertierung entspricht nicht der vom Theme gewählten Datei.
Ergänzen Sie den benötigten Vorschaubildtyp oder den richtigen Bereich der Warteschlange.
Das Bild stammt von einem CDN
Die Antwort wird nicht direkt durch die Regel des Hauptservers des Shops ausgeliefert.
Überprüfen Sie Format, Cache-Key und Aktualisierung auf CDN-Seite.
WebP hat eine hohe Auflösung
Das Format kann korrekt sein, aber das gewählte Bild ist weiterhin zu groß.
Vergleichen Sie die natürlichen Abmessungen mit der Darstellungsgröße.
3. Prüfen Sie srcset, picture und die gewählte Variante
Bei responsiven Bildern wählt der Browser die Ressource unter Berücksichtigung der Bedingungen der Seite und des Geräts aus. Prüfen Sie das Element img, gegebenenfalls srcset und sizes und bei picture auch die Elemente source. Die Eigenschaft currentSrc hilft dabei, die tatsächlich gewählte Adresse zu bestimmen, statt sich am ersten Eintrag im Code zu orientieren.
Das Element picture ermöglicht die Auslieferung alternativer Quellen, zum Beispiel je nach Format oder Media-Bedingung; die Auswahlregeln beschreibt die Dokumentation zum picture-Element. Nicht jedes Theme nutzt diesen Mechanismus, und nicht jeder Shop benötigt eine Änderung des HTML, wenn die Formataushandlung auf Serverseite korrekt funktioniert.
Wiederholen Sie den Test für ein Smartphone. Ein 2000 px breites Bild, das in einer kleinen Vorschau verwendet wird, bleibt auch nach der Konvertierung eine unnötige Belastung. Größenwahl und Formatauswahl sind zwei getrennte Einstellungen.
4. Eigene Messung: drei JPEG- und WebP-Illustrationen
Für den kontrollierten Test haben wir drei vorhandene Blog-Illustrationen in der Größe 700 × 400 px verwendet. Jedes JPEG haben wir mit PHP 8.1.34 und GD 2.3.3 in WebP mit dem Qualitätsparameter 80 konvertiert. Weder Abmessungen noch Zuschnitt wurden geändert. Chromium lud sechs Dateien von einem lokalen HTTP-Server mit deaktiviertem Cache und ohne CDN.
Die Quelle der Vorschaubilder war eine lokale Kopie von PrestaShop 8.2.8 mit Warehouse 4.7.2. Die eigentliche Messung erfolgte auf einer separaten Vergleichsseite, daher messen wir weder die Ladezeit der Produktseite noch den Effekt der Modulimplementierung. Angegeben werden die Bytes des Inhalts der erhaltenen Antworten, ohne Transport-Header. Alle sechs Anfragen endeten mit HTTP 200 und dem korrekten Bildtyp.
Gemessene Antwortgröße für dieselben drei Illustrationen
Das Ergebnis zeigt die Größen konkreter Dateien. Es beweist nicht, dass jedes WebP um denselben Wert kleiner sein wird oder dass beide Kodierungen eine identische visuelle Qualität haben. Die Qualitätsparameter verschiedener Formate sind keine gemeinsame Skala. Betrachten Sie die Bilder in ihrer tatsächlichen Nutzungsgröße und achten Sie dabei auf Schrift, feine Texturen und scharfe Kanten.
5. Prüfen Sie die Warteschlange und wiederholen Sie erst dann die Konvertierung
In WebP Pro 2.1.3 kann das Speichern oder Skalieren eines Bildes eine Aufgabe zur Warteschlange hinzufügen. Die fertige Variante entsteht nach deren Ausführung. Prüfen Sie bei der Diagnose, ob der richtige Bereich gewählt wurde, ob die Aufgabe verarbeitet wurde und ob sie nicht mit einem Fehler endete. Das bloße Speichern des Zeitplans startet die systemische CRON-Aufgabe nicht automatisch.
Auch eine Qualitätsänderung muss bestehende Dateien nicht sofort ändern. Im geprüften Code kann ein frisches WebP außerhalb des Überschreibmodus übersprungen werden. Wenn Sie die Qualität bewusst ändern, planen Sie die erneute Generierung des benötigten Bereichs und prüfen Sie danach das Ergebnis. Starten Sie nicht bei jeder kleinen Abweichung eine vollständige Regenerierung des gesamten Shops.
Wenn Sie eine Anleitung zum eigentlichen Prozess der Vorschaubilderstellung benötigen, lesen Sie den Leitfaden zur Generierung und Regenerierung von Bildern. Hier ist der maßgebliche Punkt das Bild, das der Kunde erhält.
6. Prüfen Sie Cache, CDN und LCP getrennt
Bei der Formataushandlung ist es wichtig, dass die Zwischenschicht die Antwortvarianten unterscheidet. Die WebP-Pro-Regeln sehen Vary: Accept vor, wenn das Apache-Header-Modul verfügbar ist. Das bedeutet jedoch keine automatische Konfiguration für beliebige CDN- oder Nginx-Umgebungen. Prüfen Sie die tatsächliche Antwort von dem Ort, von dem der Browser sie lädt.
Aktualisieren Sie nach einer Bildänderung den richtigen Cache und wiederholen Sie denselben Test. Notieren Sie das gewählte Gerät, den Cache-Status, die URL und die Abmessungen. Ohne diese Daten vermischt der Vergleich „vorher und nachher“ leicht unterschiedliche Bilder oder unterschiedliche Bedingungen.
Eine kleinere Datei kann die Ladezeit verkürzen, aber LCP umfasst auch andere Phasen, darunter das Warten auf den Server, die Entdeckung der Ressource und ihre Darstellung. Der Google-Leitfaden zur LCP-Optimierung zeigt, warum die Komprimierung allein nicht jede Verzögerung löst. Versprechen Sie keinen PageSpeed-Wert von 100 allein auf Grundlage des Formats.
Nächster Schritt: Wenn die Generierung oder Auslieferung der richtigen Varianten fehlt, prüfen Sie WebP Pro für PrestaShop. Wenn die Bilder korrekt sind, die Seite aber weiterhin langsam ist, bereiten Sie die Network-Ergebnisse vor und beauftragen Sie eine Diagnose der Shop-Performance.
Geprüft am 13.09.2026. Modulmechanismen: Code von WebP Pro 2.1.3. Messung der Illustrationen: separater kontrollierter HTTP-Test; keine Messung der Geschwindigkeit eines produktiven Shops.
Das Modul ermöglicht die Implementierung von Bildern von Produkten, Kategorien, Herstellern, Lieferanten, Bildern aus Modulen, Templates usw. im WebP-Format. Das WebP-Format soll ein neuer offener Standard für komprimierte Grafiken im Internet sein, als direkter Konkurrent des älteren JPEG-Formats bei geringerer Dateigröße und vergleichbarer Qualität. Mit...
Patryk Marek — Inhaber von PrestaDev.pl und Entwickler mit Spezialisierung auf PrestaShop. Seit vielen Jahren beschäftigt er sich mit der Erstellung, Weiterentwicklung und Wartung von Onlineshops. Er verbindet die Arbeit am Shop-Code und an Modulen mit der Konfiguration der Serverumgebung, in der diese Lösungen betrieben werden.
Er entwirft und entwickelt PrestaShop-Module, passt bestehende Funktionen an und erstellt Integrationen mit Großhändlern und externen Diensten. Er arbeitet an dem Import und der Aktualisierung von Produktdaten, der Automatisierung der Katalogverwaltung, dem Bestellablauf sowie an Werkzeugen, die die tägliche Arbeit des Shop-Inhabers unterstützen.
Seine Erfahrung umfasst auch Shop-Updates und -Migrationen, die Diagnose von Fehlern, die Analyse der Leistung sowie die Konfiguration von Servern und Diensten, die für den Betrieb von PrestaShop erforderlich sind. Bei der Lösung von Problemen berücksichtigt er die Abhängigkeiten zwischen Modulen, dem Theme, PHP, der Datenbank und den Hosting-Einstellungen.
Im Blog teilt er Wissen, das aus langjähriger Programmierpraxis und der Arbeit mit dem technischen Hintergrund von Shops resultiert. Die Anleitungen konzentrieren sich auf konkrete Probleme, Möglichkeiten zu deren Prüfung und die Einschränkungen der beschriebenen Lösungen. Sie helfen Shop-Inhabern und technischen Fachkräften, Änderungen vorzubereiten, deren Umfang zu bewerten und das Ergebnis zu überprüfen.
Kommentare (0)