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

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, also um das richtige Dateiformat und die richtige Auflösung für jedes Gerät. Die Bilddaten selbst verkleinert er dabei nicht weiter.

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 perzeptuelle Optimierung. Darunter fällt das Reduzieren von Farbtiefe und Rauschen, das Entfernen überflüssiger Metadaten und das 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. 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. WebP erzeugt es bewusst nicht, das kann der Shop nativ. Compresso ergänzt die eine Funktion, die fehlt.

Automatisiert statt manuell

Bilder komprimiert man 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: jedes Bild nur einmal komprimieren

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. Du entscheidest 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

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

Schnelle Bilder entstehen aus dem 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.

Format und Größe hat JTL-Shop 5 bei Bildern im Griff. Die dritte Stellschraube, die konsequente Kompression der Bilddaten, bleibt offen, und an ihr hängen oft die meisten Kilobytes. 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.