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).

To było bardzo zdradliwe, aby znaleźć konfigurację, która działa dobrze. Nie jestem ekspertem w konfiguracji nginx, więc domyślam się, że jest inny sposób na zrobienie tego. Jeśli chcesz poprawić tę konfigurację, skontaktuj się ze mną, z przyjemnością zaktualizuję ten post, aby pomóc innym ludziom!

Oto moje rozwiązanie (bądźcie uprzejmi).

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

map $http_accept $webp_enable {
	default 0;
	"~*webp" 1;
}

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:

# Jpresta Speedpack
if ($webp_enable = 1) {
	# Rewrite images URL using a specific extension ".webp_compressor" so we can have specific rules to compress the image/svg
	# if the webp file is not already created.
	rewrite "^/c/([0-9]+)(\-[_a-zA-Z0-9-]*)/(.*)\.(jpg|jpeg|png)$" /img/c/$1$2.webp_compressor last;
	rewrite "^/c/([_a-zA-Z-]+)/(.*)\.(jpg|jpeg|png)$" /img/c/$1.webp_compressor last;
	rewrite "^/([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$1$2.webp_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.webp_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.webp_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.webp_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.webp_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.webp_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.webp_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.webp_compressor last;
	# all other images
	rewrite "^(.+)\.(jpg|jpeg|png)$" $1.webp_compressor last;
}

location ~* ^(.+)\.webp_compressor$ {
	# Indicates to proxies that the file content/format depends (Vary) on the "Accept" header
	add_header Vary Accept;

	# Indicates to proxies that the file can be cached for the max duration
	add_header Pragma public;
	add_header Cache-Control "public, must-revalidate, proxy-revalidate";
	expires max;

	# Indicates to nginx not to log access
	access_log off;
	log_not_found off;

	# Try to serve the WEBP file directly or compress the image
	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 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.