Neu JTL Shop 5.0 Bilder Aufruf und Lazy loading

[karabey]

Hallo,

Bin leider nicht aktuell über den Inhalt von JTL Shop 5.0 aber auf JTL Shop 4.0 ist es leider alles andere als zukunftsorientiert aufgebaut.
WebP ist vielen bekannt und dann Knoell Marketing gibt es auch ein WebP Plugin der leider aber bedingt erledigt.

Theoretisch wäre der technische Aufbau in der Form ganz passend für die aktuellen Anforderungen allerdings ist es nur mit JPG Bilder möglich.

<picture>
        <source srcset="{$Artikel->Bilder[0]->cPfadKlein}" type="image/jpeg" media="(max-width: 1200px)">
        <source srcset="{$imgcdn}{$Artikel->Bilder[0]->cPfadNormal}" type="image/jpeg" media="(max-width: 1920px)">
        <source srcset="{$imgcdn}{$Artikel->Bilder[0]->cPfadGross}" type="image/jpeg" media="(max-width: 2400px)">
        <source srcset="{$imgcdn}{$Artikel->Bilder[0]->cPfadKlein}" type="image/jpeg" media="(max-width: 480px)">
        <img src="{$imgcdn}{$Artikel->Bilder[0]->cPfadNormal}" alt="{$alt}" class="img-responsive" />
</picture>

Noch effektiver ist es natürlich mit WebP Type "image/webp" das am Ende leider mit JTL Shop 4.0 nicht funktionieren kann auch wenn ein Plugin existiert.
Der Grund dafür ist das JTL Shop 4.0 die Bilder erst erstellt wenn URL aufgerufen wird. Als man kann es auch nur danach auf WebP konvertieren.

Zusätzlich ist ein Lazy load ein klarer Vorteil für Mobile Geräte bei dem der nicht sichtbarer Teil nur nach einem scrollen geladen wird.
Dazu bin ich am tüfteln mit den https://github.com/verlok/lazyload. Viel versprechend und eventuell ausdehnbar für JTL Shop 5.0

Würde mich auch freuen wenn JTL nach so vielen Jahren auf das Boot aufspringt und den Shop vorantreibt.

 

[eRock Marketing]

Die Punkte oben wären durch Templateanpassungen auch in Shop 4 möglich.
Für das WebP Plugin werden wir in der nächsten Version integrieren "nur umwandeln, aber nicht den Quelltext anpassen".
Dann wäre es in etwa möglich:

<picture>
        <source srcset="{$imgcdn}{$Artikel->Bilder[0]->cPfadNormal}" type="image/jpeg">
        <source srcset="{$imgcdn}{$Artikel->Bilder[0]->cPfadNormal}.webp" type="image/webp">
        <img src="{$imgcdn}{$Artikel->Bilder[0]->cPfadNormal}" alt="{$alt}" class="img-responsive" />
</picture>

Die Größenanpassungen kann (und sollte) man auch integrieren, aber Achtung: Bitte kein overload produzieren.
Z.B. Wird es bei Thumbnails der Produktgallerie doch nur Mini+Klein geben - und diese Frage nach "möglichen Größen" sollte man sich dann überall stellen, denn sonst wird der Quelltext aufgebläht und ein Shop hat ja bekanntlich viele Stellen mit Bildern.