IMPORTANT WebP module for PrestaShop is only compatible with Transformer theme v4 and Panda theme v1, Panda theme v2. It's not compatible with any other themes, because using webp requires to change all img tags in your theme to picture tags. Using WebP is a easy and efficient way to have fast loading and to get higher score on Google PageSpeed Insights.
WebP is an image format from Google designed to let you display images on the web at a similar quality level to existing image formats, but with a smaller file size. More info Google WebP
Why you need to use WebP.
- Faster loading. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. The lesser content to download the faster your site will be, Google lists fast websites over slow ones in search results.
- Higher score on Google PageSpeed Insights. "Serve images in next-gen formats" is a common problem showing on the report of Google PageSpeed Insights, using webp can fix that to make your site get a higher score.
- To make Google happy. Google recommends WebP for every website to use, you will be benefited to do what Google recommends.
- It's a trend to use WebP A lot other famous websites have already switched to WebP, YouTube found that switching to WebP thumbnails resulted in 10% faster page loads. Facebook experienced a 25-35% file size savings for JPEGs and an 80% file size savings for PNGs when they switched to using WebP. More and more websites will soon switch to using WebP.
Compatibility with themes.
This WebP module is only compatibility with:
- Panda theme v2.4.4+ and Transformer theme v4.3.4+ for PrestaShop 1.7.
- Panda theme v1.4.5+ for PrestaShop 1.6.
- Panda theme v1.4.6+ for TB. NOTE FOR TB Enabling the TB's native "Enable webp images" setting on the BO>Images page can add webp support for product images, manufacturer images, supplier images and category images. Using this module to add webp support for blog images, banner images and owlcarousel slider. Iosslider doesn't support webp, see #9 on the Documentation section.
Compatibility with browsers.
WebP is supported by all modern browsers except Safari. But don't worry, thanks to the <picture> element, we can use webp on browsers which support it, use jpg on the rest browsers. Images will show perfectly fine on all browsers.
Comparison WebP and GD.
NOTE if you are using Safari, you can't see .webp images, images on the left side are also .jpg.
The above images are generated by WebP, not creating by Photoshop. Download sample images to do tests, you will get the same result.Webp demo images (129 downloads)
Reduce content size.
The total content size of a page is majorly composed by images on the page, so smaller image file size = smaller content size = shorter loading time. This is a list of some demo pages' gziped content size to show how much can be reduced by using webp instead of JPG.
Reduce image file size of images keep the same quality as what they are.
Real world tests
How many points the module can increase the score on the Google PageSpeed Insights report?
- If you get a message on the Google PageSpeed Insights saying "Serve images in next-gen formats" with a list of images which can be optimized, then using this WebP module for PrestaShop can optimize most images, so the score of your site will increase, the module can't optimized images from 3rd party modules.
- If you use lazy-loading feature on all images on homepage, then Google PageSpeed Insights can't detect any images, Google sees no images on your site, so the improvements of your image optimization work won't show on the Google PageSpeed Insights report, but your customers can tell the difference, they would be happy to not waiting for images to be loaded, personally think gif loading animations are quite annoying.
How to install and upgrade.
This WebP module for PrestaShop can be installed easily without editing any files.
How to install? Use the "Upload a module" button on "BO > Modules" page to install the module.
How to upgrade? Use the "Upload a module" button on "BO > Modules" page to upload the new version to your site, it's the same as how to install, don't worry all your data will be safe, PrestaShop will just upload updated files to your site, it won't reinstall this module.
How to get support.
If you have any questions with the module, post them out on the prestashop module support forum, we'll help you out.
No need, this module doesn't need any extra extensions, because of webp is available since PHP 5.5. But for some reason, webp isn't installed on all web servers, here is a checker for you to check if webp is enabled on your server. Download the .zip file below, and then upload the webp_checker.php file in it to your site's root folder, and then run the checker by opening http://yourdomain.com/webp_checker.php in your browser.
WebP checker (249 downloads)
No need, both .jpg and .webp thumbnails will be generated automatically by PrestaShop and this WebP module when you upload images to the product.
Yes, this module works for product images, category images, brand images and supplier images, advanced banner module, owl carousel module and Swiper module.
Refer to Google Does WebP support progressive or interlaced display?
Yes. This module’s ajax thumbnail generator feature is better, but if you like you can still use native thumbnail generation feature on the “BO>Images” page. For more info of using the name thumbnail generation feature, refer to #9 in the "Documentation" section on this page.
Not that necessary, you need to generate .webp thumbnails for product images you've uploaded, another thing you need to know is that those images are already "damaged" in some extend by the PrestaShop's native image upload function, but that doesn't matter too much for this module, for info An important fix for PrestaShop product image optimization, so install the module as early as possible.
No, WebP images are about 25%-35% smaller than jpg and png, but you can't use .webp images only, you have to keep .jpg images majorly for Safari, so thumbnails will be stored in two formats, which will increase your disk space usage for about 55%-65%.
Check this post Comparing Imagemagick module and WebP module for PrestaShop
No, because of webp format background images can't show out on Safari. So Iosslider in Panda v1 doesn't support webp, because it uses images as background.
That's because changes added to the /.htaccess file and the /img/.htaccess file got overridden by the new version of PrestaShop, go the to webp module's configuration page to reapply changes to those to files to fix the problem.