An important part of performance optimization is about images. If a shop displays huge JPG images, the mobile performance will drop significantly if the images are not optimized. On the other hand, if images are optimized correctly, the shop will be faster, and the Google Lighthouse Score will be higher. And not just by a few points - the difference can be 20 points and more. You can tackle this problem with a CDN (Content Delivery Network). But there is an easier way: The Yireo_WebP2 module by Jisse Reitsma, an open source module available on GitHub.
What is WebP?
WebP is a new image format which can replace traditional image formats.
Developed by Google, it is designed to create smaller or better-looking images compared to the JPEG, PNG, or GIF image formats.
Support for the format has increased over the years, and as of March 2021 WebP was supported by 93% of the web browsers in use worldwide.
As WebP is widely supported, it's a good idea to use it, but not without a fallback to the old image formats in order to support the other 7% of browsers.
The Yireo_WebP2 Module
Wouldn't it be great if there was a module which does all this for you? You continue using JPG images and the module generates the optimized WebP image?
There is: Yireo_WebP2.
It's on GitHub and free to use, using the OSL-3.0 License.
It parses the generated HTML for image tags, transforms the images to WebP images and outputs both image types in the <picture> syntax from above. Just installing the module will increase performance and Google Lighthouse Score of your shop. It's just Plug&Play.
Many thanks go to Jisse Reitsma (Yireo) who developed the module and supports it well. The code quality is high.
Hyvä Compatibility
The Yireo_Webp2 module itself is already compatible with Hyvä and supports many image types out of the box. Hyvä brings some additional elements though, using AlpineJS for rendering. In order to support images in these elements too, we have created the Hyvä Yireo_Webp2 compatibility module at https://gitlab.hyva.io/hyva-themes/hyva-compat/magento2-yireo-next-gen-images (you'll have access to it if you have a Hyvä license).
You can install it with these two commands, which will also install the Yireo_Webp2 module as a requirement:
composer require hyva-themes/magento2-yireo-next-gen-images bin/magento setup:upgrade
Please have a look at the installation instructions as there is one manual change to a template file which is necessary with the current version of Hyvä.
The following image types are supported:
- CMS images
- Product gallery
- Product lists in category and search results
- The "Product Listing" widget
- Swatches
- Upselling, crossselling and related products lists
- Other product sliders, i.e. the "Popular Products" on the default homepage
Restrictions
There is just one restriction I know of: the module doesn't transform background images to WebP. They aren't used in the Magento or Hyvä default, but can be used in custom modules and themes. Currently, there is no good solution for background images because of the required fallback functionality - there is no native syntax for that in the browsers. A solution would require JavaScript and might change the display of the page, so a generic solution is hard to find. Please see this blog post about WebP background images for more information.