All You Need To Know About WebP.
About How To Add WebP Support to Magento &
About JaJuMa WebP Optimized Images.
General WebP Images FAQ
WebP is an alternative to traditional image formats like JPG or PNG. WebP uses both lossy and lossless compression and promises smaller file sizes than JPG or PNG.
However, WebP is not a full replacement for JPG/PNG image files. Due to still not all browsers supporting WebP, websites need to keep old image types alongside WebP and serve WebP only to visitors using a browser that is capable of showing the new image format.
Since websites and especially online stores usually use a lot of images, images make up for the biggest share of data that needs to be downloaded on a website.
Hence, reducing the file sizes of images means faster loading and less bandwidth consuming websites.
Especially, but not only, users with mobile devices or slow internet connection benefit highly from faster pageloads when using WebP images.
According to Google following file size reductions can be realized with WebP :
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.and
Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.(source)
However, with our own study based on Magento Luma sample images, we found that much higher savings and reduction of file sizes up to 75% and more can be realized while still having decent image quality - see chart and table below.
Please see here for more details and a (high-resolution) comparison between JPG and WebP in different quality / compression levels.
However, for images being used on websites, whats more important is a good balance between file size and quality. Or in other words, a positive user experience in terms of both, fast page load times and convincing, nice to look at images.
WebP provides just that, depending on the original images, a higher compression rate may result in a huge drop of file sizes but only slight, hardly noticeable by the human eye, loss of quality.
You can get an impression of how different compression rates affect file size and quality in this WebP vs. JPG quality comparison.
Can you spot the difference in quality?
You want your website to load fast, even on mobile devices, even for customers using slow, small bandwidth connections?
WebP is your choice to get there. Its as simple as that.
Pagespeed matters and everyone loves fast loading websites and online stores, right?
Of course, also uncle Google loves fast websites. You want to make the Google bot to like your website, want to have high scores on Google Page Speed Insight and Lighthouse Audits?
WebP is the way for you to go. Its all about speed and performance of websites. This is why Google recommends and promotes WebP and this is why every website should use it.
- ✓ Google Chrome (Desktop + Mobile versions, since 2011)
- ✓ Firefox (Desktop + Mobile versions, since Version 65, January 2019)
- ✓ Opera (Desktop + Mobile versions, since 2011)
- ✓ EDGE (since Version 18, Novemeber 2018)
- ✗ IE (Desktop + Mobile versions)
- ✓ Safari (Desktop + Mobile versions)
Together these browsers add up to 90+% of all internet users being able to see WebP images.
Custom functions for converting JPG/PNG to WebP and serving WebP to those customers using compatible browsers need to be added.
The easiest way to do this is by using an extension like JaJuMa WebP Optimized Images Extension for Magento 2 that provides these functions and comes with more options for your convenience and maximum compatibility for your Magento site.
JaJuMa WebP Optimized Images Extension for Magento 2
The extension will convert your existing images automatically. It supports 3 conversion tools for maximum compatibility, runs 100% on-premise with no recurring cost or additional dependencys for you.
JaJuMa WebP Optimized Images FAQ
- GD (with WebP Support enabled)
GD should work out of-the-box on most Magento installation.
But the command line tools cwebp + Imagemagick need to be executable by webuser and might need additional installation or configuration steps to run correctly on your server.
If you have the extension already installed you can check if the conversion tools are working on your server using the Conversion Test Tool from Backend.
For testing the conversion and preview the conversion result please follow these steps:
- 1. Complete Conversion Configuration as described in the manual
- 2. Input the Product ID (not SKU) into the text field next to “Test Conversion Tool” - Button
- 3. Click “Test Conversion Tool” - Button
- 4. See PopUp with conversion result:
- Success: In case the conversion is successful:
- Fail: In case the conversion fails the PopUp will give you some hint on what went wrong and how to fix it.
You can move the vertical slider to reveal more of the original image or the WebP image as you like, to get the perfect impression regarding quality.
If you want to check which conversion tools are available on your server from CLI / without having the extension installed, please follow these steps:
php -i | grep -E 'WebP Support|GD'If GD is
- not supported / installed on your server: This will give you an empty result.
- supported / installed on your server: Output should be something like this:
GD Support => enabledNote: The last line of this output must be showing enabled.
GD Version => bundled (2.1.0 compatible)
WebP Support => enabled
cwebpIf cwebp is
- not supported / installed on your server: This will give you an you an error message.
- supported / installed on your server: Output should be the man page for cwebp.
In case cwebp is not available as global command on your server, you can try these steps:
- Add cwebp to you server
a) Upload official cwebp lib from here https://developers.google.com/speed/webp/docs/precompiled
b) This lib is also bundled with our extension. If you have the extension already installed you will find it in this path: /magento/root/app/code/Jajuma/WebpImages/bin/cwebp
- Make sure the lib is executable
- Run the following command on your CLI:
- can run on your server using this method: Output should be the man page for cwebp.
- cannot run on your server using this method: This will give you an error message / note about missing dependencies.
For cwebp to work correctly with the extension:
- cwebp and all dependencies need to be installed correctly on your system
- cwebp binary needs to be executable (by webuser)
convertIf Imagemagick is
- not supported / installed on your server: This will give you an error message.
- supported / installed on your server: Output should be the man page for Imagemagick.
Using HTML5 <picture> -tag / browser WebP support detection it is ensured that .webp files are only served to browsers that can show this image type. For visitors using a web browser without .webp support, the extension automatically fall back to delivering .jpg or .png files.
The extension integrates with Magento Media Management.
Means, WebP image files are created for the same size variants as for .jpg/.png files (for example thumbnails and small grid images as well as original size).
The extension comes with a separate Media Cache for WebP images.
WebP images generated and stored in this Cache can be cleared at any time, e. g. to apply new conversion config / quality level.
While trying as far as feasible to avoid conflicts with, or breaking other custom functions, we cannot guarantee so for every imaginable customization out there.
Specifically in case you have other customizations regarding how images are delivered to your customers (such as lazyloading, image swap on hover, images served from CDN…), the extension might still work fine. But it is also possible there might be conflicts preventing the extension from working as expected.
It totally depends on how your custom implementation is designed to work.
However, besides supporting 3 different conversion tools we also added some configuration options trying to have the extension work in as many scenarios as possible.
Please check the manual chapter 4.3 for Advanced Configuration options.
You can configure the quality / compression level used for conversion as you like for the perfect balance between file size and quality that matches your requirements.
In case you use cwebp or Imagemagick for WebP conversion, you can even use a fully custom conversion command to fine tune the conversion results according to your needs.
Please see the manual for detailed configuration instructions.
It will show you a side by side comparison between original image (left) and created WebP image (right) or some hints on what went wrong in case conversion failed.
Just play with the quality level and conversion settings until it is as low as possible to still satisfy your needs regarding quality and have the smallest file size possible.
Furthermore, expectations regarding image quality may vary a lot from use case to use case.
Hence, there is no ‘’one size fits all’’ recommendation for quality level / conversion configuration that delivers ‘perfect’ results for every use case.
With the preconfigured conversion parameters in Base Mode we tried our best to provide you with a configuration that creates good results out-of-the-box.
Using Quality Level 75 as default compression factor seems to be a good and safe choice for getting solid and balanced results in most cases.
In case the results with this configuration are not satisfying to you, please feel free to play around with the different parameters in Advanced Mode to find a configuration that better suits your needs. Its easy with the conversion test tool provided by the extension.
You can add any string or RegEx as comma separated list. Any <img>-tag matching with any of the given strings/RegEx will be excluded from conversion.
Example 1: Exclude Logo named logo.png:
Example 2: Exclude Logo named logo.png AND all images through WYSIWYG editor:
Example 3: Exclude images with a certain css class, e. g. product-image-photo:
Note: img-tags with data-nowebp="true" are excluded from conversion by default.
However, the price for this is the “challenge” to get cwebp up and running on your server, which might not be possible in every case, e. g. with some shared hosts.
In that case we recommend to use GD, it should work out-of-the-box on most Magento Systems without further setup requirements and is easy to use due to having just one option to be configured. But in most cases GD still provides pretty good results.
Imagemagick is also pretty good regarding conversion speed, however it is said to produce slightly less good quality than the other 2 tools.