WebP Optimized Images für Magento 2

WebP is an image format that was first released in 2010. It is currently developed and promoted by Google.
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.

WebP allows to have smaller file sizes compared to JPG or PNG while keeping the same quality or having only minimal loss in quality.
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.

The percentage how much smaller WebP images can be compared to JPG and PNG highly depends on your individual case. E. g. what type of images do you have, how much are your JPG/PNG files already optimized through lossy/lossless compression techniques, what are your quality expectations/requirements...

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 as well as more details and a (high-resolution) comparison between JPG and WebP in different quality / compression levels above.

Yes, WebP can provide the same quality as JPG or PNG.
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 our WebP vs. JPG quality comparison above.
Can you spot the difference in quality?

WebP allows you to have images with smaller files size on your website. Smaller file size means faster load times, means better user experience.
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.

Browser coverage for WebP is by now almost 100%.

See https://caniuse.com

No, Magento does not support WebP images out-of-the box.
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.

The best and quickest way for adding WebP images to your Magento store is by using an extension like JaJuMa WebP Optimized Images Extension for Magento 2
The extension will convert your existing as well as new images automatically. It supports 3 conversion tools for maximum compatibility, runs 100% on-premise with no recurring cost or additional dependencys for you.

For the extension to work correctly, at least one of the supported conversion tools must be available on your server:

• GD (with WebP Support enabled)
• cwebp
• Imagemagick

At least one of these conversion tools must be available on your server.
GD should work out of-the-box on most Magento installation.
Nowadays, the command line tools cwebp + Imagemagick are available on most hosts as well.
If not, they might need additional installation or configuration steps to run correctly on your server - please see the manual for further info and instructions.

Check from Backend:
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. 1. Complete Conversion Configuration as described in the manual
2. 2. Input the Product ID (not SKU) into the text field next to “Test Conversion Tool” - Button
3. 3. Click “Test Conversion Tool” - Button
4. 4. See PopUp with conversion result:
   Success: In case the conversion is successful:
   You will see the result as a side by side comparison between original image (left) and created WebP image (right).
   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.
   Fail: In case the conversion fails the PopUp will give you some hint on what went wrong and how to fix it.

Check from CLI:
If you want to check which conversion tools are available on your server from CLI / without having the extension installed, please follow steps described in following quesions:

Run following command on your CLI:

php -i  grep -E 'WebP SupportGD'

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 => enabled
GD Version => bundled (2.1.0 compatible)

WebP Support => enabled

Note: The last line of this output must be showing enabled.

Run following command on your CLI see if cwebp is available as global command:

cwebp

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

</path/to/cwebp/lib/on/your_server>/cwebp

If cwebp
- 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.

Please Note:
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)

Run following command on your CLI to see if ImageMagick is available as global command:

convert

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

JaJuMa WebP Optimized Images Extension supports conversion of .jpg and .png images into .webp files based on configuration as described below using one of three supported conversion tools:

• GD
• Cwebp
• Imagemagick

All images found in markup on all pages on your site, as well as images in Fotorama Media Gallery on Product Page are converted and delivered as WebP images to visitors.
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.

Yes, JaJuMa WebP Optimized Images is fully compatible with Full Page Cache (Default FPC & Varnish).

As any Extension on Magento Marketplace, JaJuMa WebP Optimized Images is developed to work with Magento Default.
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…), the extension will still work fine in most cases. 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 as well as checks to avoid breaking things.

Yes, of course.
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.

JaJuMa WebP Optimized Images extension comes with a conversion preview tool.
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.

Conversion results, in terms of webp file size, saving compared to .jpg/.png as well as quality, highly depend on your existing images.
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.

Please see Official Documentation for
cwebp: https://developers.google.com/speed/webp/docs/cwebp
Imagemagick: https://www.imagemagick.org/script/webp.php

Yes, with the extensions Blacklist config it is possible to exclude certain images on your site from WebP conversion.
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:
logo\.jpg
Example 2: Exclude Logo named logo.png AND all images through WYSIWYG editor:
logo\.jpg,wysiwyg
Example 3: Exclude images with a certain css class, e. g. product-image-photo:
product-image-photo

Note: img-tags with data-nowebp="true" are excluded from conversion by default.

We recommend to use cwebp, the official conversion tool developed by Google. It is the best choice regarding quality, conversion speed and also provides the most conversion parameters.
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.

Yes, with this extension Browsers that do not support WebP will automatically fallback to loading original .jpg/.png images.

No, this extension works 100% locally on your server, including WebP conversions.

No data is sent to 3rd parties.

No, original image file do not get modified or deleted, including image paths in DB.

Generated WebP image files are saved separately in a dedicated WebP optimized images cache folder.

Yes. Both, images that already exist when the module is installed and images that are added later are optimized.