Zu große Produktbilder in PrestaShop: Bildgrößen, Miniaturansichten und Lazy Loading

Sie öffnen auf dem Smartphone eine Kategorie mit vierzig Produkten, und die Seite braucht lange, bis sie erscheint. In den meisten Shops ist nicht der Server oder PHP schuld, sondern die Bilder. Fotos in Kameraauflösung hochgeladen, Miniaturansichten in einer Größe, die das Theme gar nicht mehr verwendet, schwere Formate und alle Bilder, die gleichzeitig geladen werden, obwohl der Kunde nur die ersten vier sieht.

In diesem Artikel geht es darum, wie PrestaShop mit Produktbildern umgeht und was Sie einstellen können.

Wie PrestaShop die Bilder erzeugt

Wenn Sie ein Foto zu einem Produkt hochladen, speichert PrestaShop das Original und erzeugt daraus eine Kopie für jede Bildgröße, die für Produkte definiert ist: die Miniatur in der Liste, die im Warenkorb, die große auf der Produktseite, die der Galerie usw. Das Theme fordert an jeder Stelle die passende Größe an.

Die Größen werden im Back-Office in den Bildeinstellungen konfiguriert (in neueren Versionen im Menü Design). Jede hat einen Namen, eine Breite, eine Höhe und die Inhaltstypen, für die sie gilt: Produkte, Kategorien, Marken, Lieferanten oder Shops.

Daraus ergeben sich zwei Folgen:

• Das Gewicht, das beim Kunden ankommt, hängt von der erzeugten Größe ab, nicht vom Originalfoto. Ein riesiges Foto belastet die Liste nicht, wenn die Miniatur klein ist.
• Passt eine Größe nicht zu dem Platz, den das Theme ihr auf dem Bildschirm gibt, lädt der Browser ein größeres Bild als nötig und verkleinert es, oder ein kleineres und vergrößert es (dann wirkt es unscharf).

Überflüssige und fehlende Größen

Über die Jahre sammelt ein Shop Bildgrößen früherer Themes, nicht mehr vorhandener Module oder von Tests an. Jede zusätzliche Größe bedeutet:

• Eine Datei mehr pro Produktfoto, die Speicherplatz und Sicherungen belegt.
• Mehr Zeit beim Hochladen eines Bildes und beim Neuerzeugen.

Prüfen Sie, welche Größen Ihr Theme tatsächlich verwendet (seine Templates und seine Konfigurationsdatei nennen sie) und welche Ihre Module verwenden. Die, die niemand nutzt, können Sie löschen, aber prüfen Sie das vorher auf einer Kopie: Ein Modul, das eine nicht mehr vorhandene Größe anfordert, zeigt defekte Bilder.

Und umgekehrt: Zeigt das Theme die Miniaturen der Liste größer an als die erzeugte Größe, etwa nach einem Redesign, wirken die Fotos unscharf. Passen Sie die Größe an den tatsächlichen Platz an und berücksichtigen Sie dabei Bildschirme mit hoher Pixeldichte.

Wann die Miniaturansichten neu erzeugt werden müssen

Vorhandene Miniaturen ändern sich nicht von selbst, wenn Sie eine Größe ändern. Sie müssen sie neu erzeugen, auf derselben Seite der Bildeinstellungen. Das ist nötig, wenn Sie:

• die Abmessungen einer Größe ändern.
• eine neue Größe hinzufügen (zum Beispiel beim Theme-Wechsel).
• das Ausgabeformat oder die Kompressionsqualität ändern.
• Bilder aus einer Sicherung wiederherstellen und Miniaturen fehlen.

Auch das Originalfoto zählt

Auch wenn der Kunde das Original nicht herunterlädt, wirkt es sich aus:

• Auf Speicherplatz und Sicherungen. Fotos mit mehreren Megabyte mal Tausende Produkte ergeben Gigabytes, die jede Nacht kopiert werden.
• Auf die Erzeugungszeit. Ein riesiges Bild zu skalieren verbraucht Arbeitsspeicher und CPU; bei sehr großen Fotos kann der Vorgang wegen Speichermangels scheitern.
• Auf den Zoom mancher Produktseiten, die tatsächlich das große Bild ausliefern.

Bewährt hat sich, die Fotos bereits auf eine vernünftige Größe für die größte Verwendung im Shop (den Zoom der Produktseite) verkleinert hochzuladen, statt direkt aus der Kamera.

Formate

• JPEG für Fotos. Mit gut gewählter Qualität ist die Ersparnis gegenüber maximaler Qualität groß und der Unterschied kaum sichtbar.
• PNG nur, wenn Sie Transparenz brauchen oder es sich um eine Grafik mit Flächenfarben handelt. Für Produktfotos ist es viel schwerer als ein JPEG.
• WebP und andere moderne Formate bieten weniger Gewicht bei gleicher Qualität, und neuere PrestaShop-Versionen können sie erzeugen. Prüfen Sie vor dem Aktivieren, ob Ihr Theme und Ihre Module sie unterstützen.

Ein Formatwechsel ist ein weiterer Grund zum Neuerzeugen, mit denselben Vorsichtsmaßnahmen wie oben.

Lazy Loading

In einer langen Kategorie sieht der Kunde zunächst nur wenige Bilder. Die übrigen liegen weiter unten, und vielleicht sieht er sie nie. Lazy Loading (verzögertes Laden) sorgt dafür, dass der Browser Bilder erst lädt, wenn sie sich dem sichtbaren Bereich nähern.

• Moderne Browser erledigen das selbst mit dem Attribut loading="lazy" im Bild-Tag. Viele Themes verwenden es in den Listen bereits.
• Wenden Sie Lazy Loading nicht auf das erste sichtbare Bild an: das Hauptfoto der Produktseite oder die ersten Miniaturen der Kategorie. Sie zu verzögern verschlechtert die Zeit, in der das Wichtigste der Seite dargestellt wird.
• Geben Sie bei den Bildern Breite und Höhe an (oder reservieren Sie den Platz per CSS), damit die Seite nicht springt, wenn sie fertig geladen sind.

Eine schnelle Prüfung

1. Öffnen Sie eine Kategorie und eine Produktseite mit den Entwicklerwerkzeugen des Browsers und sehen Sie nach, wie viel die Bilder im Vergleich zum Rest der Seite wiegen.
2. Vergleichen Sie die Pixelgröße der geladenen Miniaturen mit dem Platz, den sie auf dem Bildschirm einnehmen.
3. Gehen Sie die Liste der Bildgrößen durch und entfernen Sie die, die niemand nutzt (zuerst auf einer Kopie).
4. Prüfen Sie, dass Bilder außerhalb des sichtbaren Bereichs verzögert laden und das Hauptbild nicht.
5. Wenn Sie etwas ändern, erzeugen Sie außerhalb der Geschäftszeiten neu und prüfen Sie, dass keine defekten Bilder bleiben.

So lösen Sie es in PrestaShop

Die Bilder sind ein Teil; der Rest des Seitengewichts steckt meist in CSS und JavaScript. RKR OptiMatters erstellt ein Inventar der CSS- und JS-Dateien, die jeder Seitentyp lädt, mit Gewicht und dem Modul, aus dem sie stammen, und lässt Sie überflüssige entfernen, defer oder async anwenden, Skripte von Drittanbietern bis zur ersten Interaktion verzögern und Google Fonts von Ihrem eigenen Server ausliefern; ein Testmodus vergleicht die Seite mit und ohne Optimierung. All In One Cache enthält innerhalb seines Seiten-Caches eine optionale Verschlankung mit Minifizierung von HTML sowie Inline-JS und -CSS und Lazy Loading für Bilder, dazu den vollständigen Seiten-Cache, den Abfrage-Cache in Redis und die Verwaltung von OPcache.