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.

If, after installing the module, some images on your store, such as the logo, CMS page images, back office images, etc., no longer display, it's likely due to a .htaccess file in the /img and /img/cms directories. This file blocks all PHP scripts, even if it's just a redirection (the script isn't actually in this directory).

To fix this issue, you need to add an exception for our webp.php converter as follows:

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

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|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;
}

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.

The percentage you can adjust in the module corresponds to a quality level rather than a compression percentage. 100% means maximum quality with no loss, while 50% represents reduced quality with greater compression.

As a general rule, 80% offers a good compromise between quality and file size. However, the choice depends on your needs and the type of image used. That is why we provide a comparison tool directly in the Prestashop module.

AVIF is a new, high-performance image format that is more recent than WEBP. It significantly reduces image file sizes while maintaining excellent visual quality.

On average, AVIF compresses images up to 50% more efficiently than WEBP, which already reduces file sizes by 30–40% compared to JPEG. This means a faster website, a better user experience, and improved SEO.