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.
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
- Upselling, crossselling and related products lists
- Other product sliders, i.e. the "Popular Products" on the default homepage