Problem z webp prestashop 8.1.1

[RaFi1]

Witam wszystkich szanownych forumowiczów.
Mam problem z formatem webp. Zaznaczyłem w funkcjach eksperymentalnych "Multiple image formats" jako włączony. W opcjach generowania obrazków zaznaczyłem format webp. Wygenerowałem wszystkie obrazki. Wyczyściłem pamięć podręczną. Niestety na stronie obrazki nadal pojawiają się w formacie jpg. Sprawdziłem na serwerze katalog z obrazkami. Są tam wygenerowane wszystkie obrazki zarówno w formacie jpg jak i w formacie webp. Jak zrobić żeby na stronie wyświetlał się format webp zamiast jpg? Czy trzeba gdzieś to jeszcze ustawić?
Prestashop 8.1.1
PHP 8.3

[krzysiek_web]

Otwórz stronę sklepu, kliknij F12 przełącz się na podstronę sieć i odśwież stronę sklepu f5. Jakie obrazy się załadowały w kolumnie typ?

[Yabber]

Szablon i wszystkie jego moduły muszą być dostosowane do obsługi webp i avif. Produkty wyświetlasz jakimś modułem swiper slidera, który nie jest dostosowany do tych nowych eksperymentalnych funkcjonalności.
A tak poza tym, to żadna z wersji prestashop nie jest kompatybilna z PHP 8.3 i 8.2 https://devdocs.prestashop-project.org/8/basics/installation/system-requirements/

 

[RaFi1]

7 hours ago, krzysiek_web said:

Otwórz stronę sklepu, kliknij F12 przełącz się na podstronę sieć i odśwież stronę sklepu f5. Jakie obrazy się załadowały w kolumnie typ?

W konsoli w zakładce sieć wyświetlają się jpg.

3 hours ago, Yabber said:

Szablon i wszystkie jego moduły muszą być dostosowane do obsługi webp i avif. Produkty wyświetlasz jakimś modułem swiper slidera, który nie jest dostosowany do tych nowych eksperymentalnych funkcjonalności.
A tak poza tym, to żadna z wersji prestashop nie jest kompatybilna z PHP 8.3 i 8.2 https://devdocs.prestashop-project.org/8/basics/installation/system-requirements/

 

Dziękuję Ci za info. Faktycznie muszę przełączyć na niższą wersję PHP. Przy użyciu tego szablonu, to jedynym wyjściem będzie zainstalować jakiś moduł aby wyświetlać webp, tak?

[Yabber]

13 hours ago, RaFi1 said:

Przy użyciu tego szablonu, to jedynym wyjściem będzie zainstalować jakiś moduł aby wyświetlać webp, tak?

Nie ma sensu kupowanie i instalowanie modułu generującego obrazki webp, skoro w silniku presty jest natywna obsługa webp. Zresztą wiele z tych modułów sprzedawanych do presty to popaprańce działające na zasadzie generowania webp, ale zapisu tych obrazków z błędnym rozszerzeniem JPG.

Najlepiej napisać do dewelopera szablonu, żeby wydał wersję szablonu zgodną z najnowszą wersją presty. A jak czujesz się na siłach, to sam możesz poprawić szablon. Należy odszukać w szablonie wszystkie templatki ładujące obrazki i poprawić kod ładujący obrazek. Poniżej przykładowy kod ładujący zdjęcie produktu w rozmiarze home_default:

        {block name='product_thumbnail'}
          {if $product.cover}
            <a href="{$product.url}" class="thumbnail product-thumbnail">
              <picture>
                {if !empty($product.cover.bySize.home_default.sources.avif)}<source srcset="{$product.cover.bySize.home_default.sources.avif}" type="image/avif">{/if}
                {if !empty($product.cover.bySize.home_default.sources.webp)}<source srcset="{$product.cover.bySize.home_default.sources.webp}" type="image/webp">{/if}
                <img
                  src="{$product.cover.bySize.home_default.url}"
                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
                  loading="lazy"
                  data-full-size-image-url="{$product.cover.large.url}"
                  width="{$product.cover.bySize.home_default.width}"
                  height="{$product.cover.bySize.home_default.height}"
                />
              </picture>
            </a>
          {else}
            <a href="{$product.url}" class="thumbnail product-thumbnail">
              <picture>
                {if !empty($urls.no_picture_image.bySize.home_default.sources.avif)}<source srcset="{$urls.no_picture_image.bySize.home_default.sources.avif}" type="image/avif">{/if}
                {if !empty($urls.no_picture_image.bySize.home_default.sources.webp)}<source srcset="{$urls.no_picture_image.bySize.home_default.sources.webp}" type="image/webp">{/if}
                <img
                  src="{$urls.no_picture_image.bySize.home_default.url}"
                  loading="lazy"
                  width="{$urls.no_picture_image.bySize.home_default.width}"
                  height="{$urls.no_picture_image.bySize.home_default.height}"
                />
              </picture>
            </a>
          {/if}
        {/block}

 

[endriu107]

15 hours ago, RaFi1 said:

W konsoli w zakładce sieć wyświetlają się jpg.

Jeśli sprawdzasz w przeglądarce typu chrome to możesz widzieć błędny typ zdjęcia, zobacz sobie w innej przegladarce np. w mozzilli. Generalnie prestashop działa tak że przy wyborze np. webp zdjęcia produktów będą generowane z rozszerzeniem jpg ale typ faktyczny to webp.

[RaFi1]

6 hours ago, Yabber said:

Nie ma sensu kupowanie i instalowanie modułu generującego obrazki webp, skoro w silniku presty jest natywna obsługa webp. Zresztą wiele z tych modułów sprzedawanych do presty to popaprańce działające na zasadzie generowania webp, ale zapisu tych obrazków z błędnym rozszerzeniem JPG.

Najlepiej napisać do dewelopera szablonu, żeby wydał wersję szablonu zgodną z najnowszą wersją presty. A jak czujesz się na siłach, to sam możesz poprawić szablon. Należy odszukać w szablonie wszystkie templatki ładujące obrazki i poprawić kod ładujący obrazek. Poniżej przykładowy kod ładujący zdjęcie produktu w rozmiarze home_default:

        {block name='product_thumbnail'}
          {if $product.cover}
            <a href="{$product.url}" class="thumbnail product-thumbnail">
              <picture>
                {if !empty($product.cover.bySize.home_default.sources.avif)}<source srcset="{$product.cover.bySize.home_default.sources.avif}" type="image/avif">{/if}
                {if !empty($product.cover.bySize.home_default.sources.webp)}<source srcset="{$product.cover.bySize.home_default.sources.webp}" type="image/webp">{/if}
                <img
                  src="{$product.cover.bySize.home_default.url}"
                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
                  loading="lazy"
                  data-full-size-image-url="{$product.cover.large.url}"
                  width="{$product.cover.bySize.home_default.width}"
                  height="{$product.cover.bySize.home_default.height}"
                />
              </picture>
            </a>
          {else}
            <a href="{$product.url}" class="thumbnail product-thumbnail">
              <picture>
                {if !empty($urls.no_picture_image.bySize.home_default.sources.avif)}<source srcset="{$urls.no_picture_image.bySize.home_default.sources.avif}" type="image/avif">{/if}
                {if !empty($urls.no_picture_image.bySize.home_default.sources.webp)}<source srcset="{$urls.no_picture_image.bySize.home_default.sources.webp}" type="image/webp">{/if}
                <img
                  src="{$urls.no_picture_image.bySize.home_default.url}"
                  loading="lazy"
                  width="{$urls.no_picture_image.bySize.home_default.width}"
                  height="{$urls.no_picture_image.bySize.home_default.height}"
                />
              </picture>
            </a>
          {/if}
        {/block}

 

Aż tak silny to nie jestem 🙂 Chyba jednak poszukam jakiegoś w miarę rozsądnego modułu. Mam nadzieję, że nie trafię na takiego popaprańca jak mówisz 🙂 
 

[RaFi1]

4 hours ago, endriu107 said:

Jeśli sprawdzasz w przeglądarce typu chrome to możesz widzieć błędny typ zdjęcia, zobacz sobie w innej przegladarce np. w mozzilli. Generalnie prestashop działa tak że przy wyborze np. webp zdjęcia produktów będą generowane z rozszerzeniem jpg ale typ faktyczny to webp.

Sprawdzałem w innym sklepie, który ma moduł webp. Zrobiłem dokładnie taki sam produkt (wrzuciłem identyczne zdjęcie). Na tym sklepie z modułem wygenerował się plik webp w katalogu img. W konsoli również wyświetla typ webp. Wielkość tego pliku według konsoli w chrome jest około 3 razy mniejsza niż tego w nowym sklepie z rozszerzeniem jpg. To chyba świadczy o tym, że jednak pliki z rozszerzeniem jpg faktycznie są tymi za które się podają 🙂 

[endriu107]

Wyciągasz błędne wnioski, wielkość pliku ma znaczenie pod warunkiem że w obu sklepach używasz takich samych ustawień zmiany pliku na webp. Jeśli w jednym masz kompresje na 90 a  w drugim na 70 to będziesz miał różne rezultaty. Kilka innych czynników również może mieć wpływ na wagę końcową, na początek sprawdź czy faktycznie zdjęcia z rozszerzeniem jpg są webp tak jak napisałem w mozilli.