WebP / AVIF

If you are using Nginx, then make sure your configuration is as follow:

"Proxy mode" must be ON, other options must be OFF.

Jeśli po zainstalowaniu modułu niektóre obrazy w Twoim sklepie, takie jak logo, obrazy na stronach CMS, obrazy w panelu administracyjnym itp., przestaną się wyświetlać, prawdopodobnie jest to spowodowane plikiem .htaccess w katalogach /img i /img/cms. Ten plik blokuje wszystkie skrypty PHP, nawet jeśli jest to tylko przekierowanie (skrypt nie znajduje się faktycznie w tym katalogu).

Aby rozwiązać ten problem, należy dodać wyjątek dla naszego konwertera webp.php w następujący sposób:

# Disable PHP globally unless explicitly re-enabled
<IfModule mod_php5.c>
    php_flag engine off

    # Enable PHP execution only for avif.php and webp.php (used by Speed Pack)
    <Files "avif.php">
        php_flag engine on
    </Files>
    <Files "webp.php">
        php_flag engine on
    </Files>
</IfModule>

# Apache 2.2 access control
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all

    # Allow access to static image and video files
    <FilesMatch "\.(jpe?g|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|avif|webp)$">
        Allow from all
    </FilesMatch>

    # Allow access to avif.php and webp.php (for image conversion)
    <Files "avif.php">
        Allow from all
    </Files>
    <Files "webp.php">
        Allow from all
    </Files>
</IfModule>

# Apache 2.4 access control
<IfModule mod_authz_core.c>
    Require all denied

    # Allow access to static image and video files
    <FilesMatch "\.(jpe?g|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|avif|webp)$">
        Require all granted
    </FilesMatch>

    # Allow access to avif.php and webp.php (for image conversion)
    <Files "avif.php">
        Require all granted
    </Files>
    <Files "webp.php">
        Require all granted
    </Files>
</IfModule>

Ou pour /img/cms/.htaccess

<IfModule mod_php5.c>
    php_flag engine off

    # Enable PHP only for avif.php and webp.php (Speed Pack)
    <Files "avif.php">
        php_flag engine on
    </Files>
    <Files "webp.php">
        php_flag engine on
    </Files>

</IfModule>

# Enable avif.php and webp.php (Speed Pack)
<Files "avif.php">
    Order allow,deny
    Allow from all
</Files>
<Files "webp.php">
    Order allow,deny
    Allow from all
</Files>


deny from all
<Files ~ "(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|avif|webp)$">
	order deny,allow
	allow from all
</Files>

Tak, wszystkie zdjęcia z Twojego sklepu zostaną automatycznie przekonwertowane do formatu WEBP. Nawet obrazy z CMS lub innych modułów jak blog.

TAK nadal potrzebujesz modułu WEBP dla Prestashop! Ponieważ funkcja ta ma błąd w PS 8.0. Powinna być naprawiona w PS 8.1, ale sprawdzę to jak tylko zostanie wydana, bo nie wiem czy obrazy JPG będą wyświetlane przeglądarkom, które nie potrafią odczytać formatu WEBP jak Safari (iPhone).

Ta konfiguracja pozwala Nginx automatycznie wykrywać najbardziej zoptymalizowany format obrazu obsługiwany przez przeglądarkę odwiedzającego: AVIF w pierwszej kolejności, w przeciwnym razie WEBP, a jeśli żaden z nich nie jest obsługiwany – oryginalny obraz (JPG/PNG). Serwer przepisuje adresy URL obrazów, aby przekierować je do skryptu kompresji (avif.php lub webp.php), który w razie potrzeby generuje plik.

Nagłówki HTTP (Vary: Accept, Cache-Control itd.) zapewniają, że pliki są prawidłowo buforowane przez przeglądarki i serwery proxy, dostarczając każdemu użytkownikowi najlepszą możliwą wersję.

Przed sekcją "serwer" umieść ten kod:

# Detect best supported format (AVIF > WEBP > none)
map $http_accept $format_compressor {
    default "";
    "~*avif" "avif";
    "~*webp" "webp";
}

Powie nam, czy przeglądarka odwiedzającego może odczytać obrazy WEBP.

Prawdopodobnie masz wiele linii "rewrite" dla wszystkich obrazów, umieść następujący kod tuż przed nim:

# AVIF/WEBP priority handling
if ($format_compressor != "") {
    rewrite "^/c/([0-9]+)(\-[_a-zA-Z0-9-]*)/(.*)\.(jpg|jpeg|png)$" /img/c/$1$2.${format_compressor}_compressor last;
    rewrite "^/c/([_a-zA-Z-]+)/(.*)\.(jpg|jpeg|png)$" /img/c/$1.${format_compressor}_compressor last;
    rewrite "^/([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$1$2.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$1$2$3.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$1$2$3$4.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$1$2$3$4$5.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9.${format_compressor}_compressor last;
    rewrite "^(.+)\.(jpg|jpeg|png)$" $1.${format_compressor}_compressor last;
}

# Location for AVIF
location ~* ^(.+)\.avif_compressor$ {
    add_header Vary Accept;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    expires max;
    access_log off;
    log_not_found off;

    set $url_avif_compressor "/modules/jprestaspeedpack/controllers/front/avif.php?src=$1.jpg";
    try_files $1.avif $url_avif_compressor;
}

# Location for WEBP
location ~* ^(.+)\.webp_compressor$ {
    add_header Vary Accept;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    expires max;
    access_log off;
    log_not_found off;

    set $url_webp_compressor "/modules/jprestaspeedpack/controllers/front/webp.php?src=$1.jpg";
    try_files $1.webp $url_webp_compressor;
}

OSTRZEŻENIE: jeśli używasz samodzielnego modułu kompresji AVIF/WEBP, musisz zastąpić „jprestaspeedpack” przez „jprestawebp”.

Skontaktuj się ze mną, jeśli potrzebujesz pomocy lub jeśli możesz poprawić skrypt!

tak, przeglądarki, które nie mogą odczytać formatu WEBP, otrzymają oryginalny format (JPG/PNG).

Moduł nie wywołuje funkcji Hook, która umożliwia aktualizację.

Musisz zmodyfikować funkcję imageResize() w pliku /modules/prestablog/prestablog.php:

Zastąp to

         return ImageManager::write('jpg', $dest_image, $file_after);

Przez to

         $ret = ImageManager::write('jpg', $dest_image, $file_after);

 Hook::exec('actionOnImageResizeAfter', ['dst_file' => $file_after, 'file_type' => 'jpg']);

 return $ret;

następnie obrazy zostaną zaktualizowane.

Nie, moduł tylko konwertuje obrazy JPG/PNG do formatu WEBP. Zaleca się wgrywanie obrazów jako JPG, ponieważ niektóre przeglądarki wciąż nie mogą ładować plików WEBP. Ponadto uważam, że JPG są lepsze jako obrazy oryginalne, ponieważ Prestashop tworzy wiele formatów/rozmiarów obrazów, dlatego oryginalny obraz powinien być dobrej jakości.

Procent, który można dostosować w module, odnosi się bardziej do poziomu jakości niż do procentu kompresji. 100% oznacza maksymalną jakość bez strat, podczas gdy 50% oznacza niższą jakość z większą kompresją.

Ogólnie rzecz biorąc, 80% to dobry kompromis między jakością a rozmiarem pliku. Wybór jednak zależy od Twoich potrzeb i rodzaju używanego obrazu. Dlatego udostępniamy narzędzie do porównywania bezpośrednio w module Prestashop.

AVIF to nowoczesny i bardzo wydajny format obrazu, nowszy niż WEBP. Pozwala znacznie zmniejszyć rozmiar plików graficznych przy zachowaniu wysokiej jakości.

Średnio AVIF kompresuje obrazy nawet o 50% skuteczniej niż WEBP, który i tak już zmniejsza rozmiary o 30–40% w porównaniu do JPEG. Efekt? Szybsza strona, lepsze wrażenia użytkownika i wyższa pozycja w wyszukiwarkach.