If you have tested your Prestashop store with tools like Google Pagespeed Insight or GTMetrix you may have received the recommendation "Efficiently encode images" or "Serve Images in NexGen Formats". If this is the case this article is for you, I explain how to choose the right Prestashop module to compress your images to WEBP format.

Image optimization, why do it?

This is probably the first question to ask! Optimizing an image allows you to reduce its size / weight, and therefore the speed of loading the page will be faster. The WEBP format allows you to optimize PNG and JPG files of your web pages and to reduce their size by 30% on average, this is even more important on cell phones which have a slower internet connection. You will not necessarily gain in SEO but the loading of pages being faster your customers will be more likely to make purchases online!

Does the module compress all the images?

Some modules will only compress the images of products, categories, brands and suppliers. The images of the theme or the modules will not benefit from WEBP optimization. Check this point when you choose the Prestashop WEBP module.

Is it necessary to install a particular PHP extension?

Check how the module compresses images. It needs one of the following compressors:

Cwebp binaries: this is the program provided by Google, some modules install it but they are not always compatible with the servers (denied permissions or incompatible processors)
Vips PHP extension: this is a PHP extension not often present on standard hosting
Imagick PHP extension: it's a PHP extension not often present on standard hosting
Gmagick PHP extension: it's a PHP extension not often present on standard hosting
Gd PHP extension: it's a PHP extension often present on hosting but not always compiled with WEBP option

Some modules use an external image optimization service like ewww.io.

By experience the most efficient WEBP compressor is the GD extension. The Google binary is often much slower (x10) than GD.

What happens if the browser (e.g. Safari) does not read the WEBP format?

Make sure that the module returns the original (uncompressed) image if the browser cannot read WEBP format. For example, Safari browsers (iPhones/Apple) will only support WEBP from version 16! For this there is a very simple way, all browsers indicate to the server which format it can read with the header 'Accept', if 'image/webp' is not there then you must return the uncompressed image.

Also check if the module modifies the URLs of the images or not (by modifying the .JPG extension to .WEBP for example). If it doesn't modify them (it's better for HTML cache modules) it must offer the possibility to do so because some CDN (proxy) like Cloudflare don't manage the 'Vary: Accept' header.

How are old and new images compressed?

There are two strategies:

  1. the module compresses the images each time you add them via the back office, in this case it will take a very long time to compress the images already present in the store.
  2. the module compresses the images in WEBP format at the first display, in this case no need for a big treatment, the images are compressed only if they are used and at the very first display in a browser

Can we choose the quality of the images?

The WEBP format is 'lossy', i.e. with data loss, the quality of the images is degraded but you can adjust the compression rate so that this loss of quality is not visible to the naked eye. Check that the WEBP module allows you to choose this compression rate so that you can define the required quality by yourself.

Conclusion

You now know what questions you should ask yourself to choose your Prestashop WEBP compression module.

You should know that our module Speed Pack (Page Cache Ultimate + WEBP + SQL Profiling + Database cleaning) offers WEBP compression with Page Cache Ultimate or you can go for the standalone module WEBP compression compatible from Prestashop 1.6.