WebP

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

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

If after the installation of the module some images of your store are not displayed anymore like the logo, the images of the CMS pages, the images in the backoffice, etc. it is because of the .htaccess file of the /img directory. This one blocks any PHP script, even if it is a redirection (the script is not really in this directory).

To correct this problem you have to rename the file /img/.htaccess to /img/.htaccess.off

Yes, all images of your shop will be automatically converted into the WEBP format. Even images from CMS or other modules like blog.

YES you still need a WEBP module for Prestashop! Because the feature has a bug in PS 8.0. It should be fixed in PS 8.1 but I will check this as soon as it is released because I don't know if JPG images will be displayed to browsers that cannot read WEBP format like Safari (iPhone).

This has been very tricky to find a configuration that works fine. I'm not expert in the configuration of nginx so I guess there is an other way of doing it. If you want to improve this configuration then contact me, I will be happy to update this post to help other people!

Here is my solution (be kind).

Before the section "server", place this code:

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

It will tell us if the browser of the visitor can read WEBP images.

You probably have multiple lines of "rewrite" for all images, place the following code just before it:

# 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$" /img/c/$1$2.webp_compressor last;
	rewrite "^/c/([_a-zA-Z-]+)/(.*)\.jpg$" /img/c/$1.webp_compressor last;
	rewrite "^/([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.jpg$" /img/p/$1/$1$2.webp_compressor last;
	rewrite "^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.jpg$" /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$" /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$" /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$" /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$" /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$" /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$" /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$" $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;
}

WARNING: if you are using the standalone WEBP compression module then you must replace 'jprestaspeedpack' by 'jprestawebp'.

Contact me if you need help or if you can improve the script!

​Yes, browsers that cannot read WEBP format will get the original format (JPG/PNG).