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 typical HTML used for a WebP image with JPG fallback looks as follows:
<source type="image/webp" srcset="tile_1.webp" />
<source type="image/jpeg" srcset="tile_1.jpg" />
<img src="tile_1.jpg" alt="Title" loading="lazy" />
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.
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
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
- Upselling, crossselling and related products lists
- Other product sliders, i.e. the “Popular Products” on the default homepage
Author: Andreas von Studnitz
Andreas von Studnitz is a Magento developer and one of the Managing Directors at integer_net. His main areas of interest are backend development, Magento consulting and giving developer trainings. He is a Magento 2 Certified Professional Developer Plus and holds several other Magento certifications for both Magento 1 and Magento 2. Andreas was selected as a Magento Master in 2019 and 2020.
More Information · Twitter · GitHub · LinkedIn