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:

<IfModule mod_php5.c>
    php_flag engine off

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

# Apache 2.2
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all
    <Files ~ "webp.php|(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|webp)$">
        Allow from all
    </Files>
</IfModule>

# Apache 2.4
<IfModule mod_authz_core.c>
    Require all denied
    <Files ~ "webp.php|(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|webp)$">

        Require all granted
    </Files>
</IfModule>

Or for /img/cms/.htaccess

<IfModule mod_php5.c>
    php_flag engine off

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

# Enable webp.php (Speed Pack)
<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|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.