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:

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

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


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. 

Andreas von Studnitz

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