Since already some years, WebP is an alternative image format, developed by Google, to offer the same quality but in much smaller sizes: In short, WebP allows serving much smaller Magento 2 images to WebP-capable browsers. Our Magento 2 extension is now freely available on GitHub. Let's see what is inside.
WebP for WebP-capable browsers
Images are traditionally PNG, JPEG or GIF. Over the years, other image formats have popped up and WebP was one of them. On the WebP project site, you can read details on how the size of original formats compares to WebP. We'll just settle for the end-conclusion here: WebP offers smaller images.
There is only one catch: Not all browsers support WebP. Years ago, WebP was only supported by Chrome. But nowadays, the support has gone up. Don't see the lack of browser support as a downside. An estimate is that more than 75% of the browsers of today are supporting WebP, so why not make those users happier (while remaining backward compatible with non-WebP for all those silly IE users).
A Magento 2 version
Years ago, we have already developed a Magento 1 version of this plugin, but finally, a Magento 2 version is now ready as well. The plugin is available on our site and on GitHub, while we - being developer-minded - can only recommend to install it via composer.
Picture-element
While the previous Magento 1 version relied heavily on browser compatibility checks, the new extension makes use of the HTML element picture to simply replace the original img element with a switch between the original image and the WebP variation. The browser can choose at will which one to load.
Workarounds for JavaScript
Still, the browser compatibility checks are in there, for instance when switching the images in the Fotorama gallery on the product page. In this case, the PHP code makes a switch, which is then incompatible with the Full Page Cache. Once the Full Page Cache, the feature of WebP-in-Fotorama is therefore disabled, to make sure the product page is still FPC-compliant.
The only way to make this work permanently is to rewrite (and restructure) the entire underlying UiComponent. This is still work in progress and if you are up for it, you can let us know your developer thoughts on the extension repository on GitHub.
Err, it doesn't work?
We have had reports of people installing the module and things working out of the box just fine. We also had few reports coming in from people that mentioned it didn't work for them - unfortunately, they never bothered explaining why and they made no effort in answering our questions either. Therefore, no known issues have been reported yet.
If you bump into an issue, however, feel free to open a GitHub Issue in the open source repository, so we can work together to make it work.
About the author
Jisse Reitsma is the founder of Yireo, extension developer, developer trainer and 3x Magento Master. His passion is for technology and open source. And he loves talking as well.
