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).
The module does not call the Hook which allows the update.
You must modify the imageResize() function in the /modules/prestablog/prestablog.php file:
Replace this
return ImageManager::write('jpg', $dest_image, $file_after);
By this
$ret = ImageManager::write('jpg', $dest_image, $file_after);
Hook::exec('actionOnImageResizeAfter', ['dst_file' => $file_after, 'file_type' => 'jpg']);
return $ret;
Afterwards your images will be updated.
No, our module is designed to convert JPG/PNG images to WEBP format. It is recommended to import images as JPG due to compatibility issues with certain browsers that cannot load WEBP files. Additionally, using JPG as original images ensures better quality since Prestashop creates multiple formats and sizes of images based on the original, emphasizing the need for good-quality originals.