JTL-Shop 5 Bilder optimieren: Was der Shop kann – und wo Bytes liegen bleiben

Einleitung

Ein Shop lädt spürbar träge, und der PageSpeed-Report zeigt immer dieselben Punkte: „Bilder effizient kodieren" und „Bilder in angemessener Größe bereitstellen". Kein Wunder – Bilder sind auf den meisten Shopseiten der mit Abstand größte Datenposten. Die gute Nachricht: JTL-Shop 5 bringt für Bilder von Haus aus schon einiges mit. Die weniger gute: an einer entscheidenden Stelle hört die Bordausstattung auf – und genau dort bleiben die meisten Kilobytes liegen.

Bildoptimierung in JTL-Shop 5: Was der Shop von Haus aus kann

Wer ein Produktbild hochlädt, bekommt vom Shop weit mehr als eine Kopie. JTL-Shop 5 erzeugt daraus automatisch mehrere Größenvarianten, hält sie im Cache vor und liefert im NOVA-Template modernes Markup mit srcset und Lazy-Loading aus. Auch das Bildformat der Gegenwart ist abgedeckt: Der Shop erzeugt und liefert WebP nativ – vorausgesetzt, auf dem Server steht ImageMagick mit WebP-Unterstützung bereit. Zwei der drei großen Hebel für schnelle Bilder sind damit ab Werk gesetzt.

Der Shop kümmert sich also um Format und Größe – um das richtige Dateiformat und die richtige Auflösung für jedes Gerät. Was er dabei nicht tut: die Bilddaten selbst so weit wie möglich verkleinern.

Wo Bytes liegen bleiben: Kompression ist nicht Skalierung

Für schnelle Bilder gibt es drei Stellschrauben: das Format (WebP statt JPEG), die Größe (nicht mehr Pixel ausliefern, als tatsächlich angezeigt werden) und die Kompression (aus den vorhandenen Pixeln so wenig Bytes wie möglich machen). Die ersten beiden erledigt JTL-Shop 5 zuverlässig. Die dritte bleibt weitgehend offen: Der Shop skaliert und konvertiert mit Standardqualität, betreibt aber keine echte perzeptuelle Optimierung – also kein intelligentes Reduzieren von Farbtiefe und Rauschen, kein Entfernen überflüssiger Metadaten, kein Ausreizen dessen, was das Auge ohnehin nicht unterscheidet.

Bilder automatisch komprimieren: die dritte Stellschraube (Compresso)

Weil uns diese Lücke in eigenen JTL-Projekten immer wieder begegnet ist, haben wir dafür ein Plugin gebaut: HDT Compresso. Es setzt genau dort an, wo der Shop aufhört – und nirgendwo sonst. Compresso greift die Größenvarianten ab, die JTL-Shop 5 ohnehin erzeugt, und komprimiert deren JPEG- und PNG-Daten über die Tinify-API (die Technik hinter TinyPNG) perzeptuell nach. Was es bewusst nicht tut: WebP erzeugen. Das kann der Shop nativ – also überlassen wir es ihm. Statt eine vorhandene Funktion zu duplizieren, ergänzt Compresso die eine, die fehlt.

Automatisiert statt manuell

Bilder komprimiert man nicht einmal, sondern fortlaufend – bei jedem neuen Artikel, jeder Bildänderung, jedem Import. Compresso klinkt sich deshalb in die Bildverarbeitung des Shops ein: Sobald JTL-Shop 5 die Varianten eines Produktbilds erzeugt, komprimiert das Plugin sie im selben Durchlauf; dasselbe gilt für Kategorie-, Hersteller- und Merkmalsbilder beim Bildabgleich. Neue Bilder sind damit optimiert, ohne dass jemand daran denken muss.

Budget und Idempotenz: einmal komprimieren, nicht zehnmal

Für den Bestand – tausende bereits vorhandene Bilder – läuft die Kompression über den nativen Cron des Shops, budgetiert nach maximaler Anzahl pro Durchlauf und pro Monat. Das Monatslimit orientiert sich am kostenlosen Tinify-Kontingent (500 Kompressionen), lässt sich aber frei setzen. Damit kein Bild und kein API-Aufruf verschwendet wird, merkt sich Compresso über eine Hash-Prüfsumme, welche Datei in welchem Zustand bereits komprimiert wurde: Unveränderte Bilder werden nie ein zweites Mal an die API geschickt. Sie entscheiden dabei pro Bildtyp und pro Größe, was überhaupt komprimiert wird, und ob vor dem Ersetzen eine unveränderte Kopie des Originals gesichert wird. Auch Bilder außerhalb der Standard-Verzeichnisse – etwa Slider- oder CMS-Grafiken – lassen sich über eigene Pfade einbeziehen.

JTL-Shop-Backend · HDT Compresso · Einstellungen

Vergrößern

JTL-Shop-Backend · HDT Compresso · Dashboard

Vergrößern

Aus der Praxis

Format, Größe, Kompression: das Zusammenspiel für schnelle Ladezeiten

Schnelle Bilder sind kein einzelnes Feature, sondern das Zusammenspiel dieser drei Ebenen. JTL-Shop 5 liefert Format und Größe, Compresso die minimalen Bytes darunter. Und beides greift ineinander: Wer die Ausgangsbilder schlank hält, gibt der WebP-Erzeugung des Shops eine bessere Grundlage – und die weiterhin ausgelieferten JPEG- und PNG-Fallbacks werden ebenfalls kleiner. Das Resultat ist eine Bildauslieferung, die auf allen drei Ebenen optimiert ist, statt nur auf zweien.

FAQ

Bei Bildern ist JTL-Shop 5 kein unbeschriebenes Blatt: Format und Größe hat der Shop im Griff. Die dritte Stellschraube – die konsequente Kompression der Bilddaten – bleibt jedoch offen, und sie ist oft die, an der die meisten Kilobytes hängen. Compresso schließt genau diese Lücke, automatisiert und ohne vorhandene Shop-Funktionen zu duplizieren. Wer bei der Shop-Performance nichts liegen lassen will, denkt Bilder auf allen drei Ebenen – nicht nur auf zweien.