cancel
Showing results for 
Search instead for 
Did you mean: 

How to serve product images in webp format

How to serve product images in webp format

I own Magento 1 online shop. I spent a lot of time to prepare high quality product images. I was punished for that by Google PageSpeed Insight. There are many of images on my front page and they weight a lot. So I started to think about changing my images format to webp for browsers that support it. I did not found appropriate extension to do this for me. Is there any?

My initial idea was to create a separate folder with internal structure mimicking original media folder structure but with all images converted in bulk to webp format. I modified getUrl() method from app/code/core/Mage/Catalog/Model/Product/Image.php to check if 'HTTP_ACCEPT' header contains 'image/webp' capability. If it does I look for the webp image in the new folder. If it is available then I exchange url returned getUrl().

This seems to work for product page images but not for others. Is there a better place in the code to hook into? Or maybe I would rather do some global replacement of image links just before the page is sent to the browser.

I am also aware that this approach is not ideal because I will need to generate webp images every time I add a new product.

Is there a better solution?

2 REPLIES 2

Re: How to serve product images in webp format

@kathdroid ,

you need to override & customize or you can install 3rd party extension to support WEBP images 

kindly check the below extension 
https://github.com/yireo/Yireo_Webp2

 

kindly Accept as a Solution if this works for you and give Kudos Smiley Happy 

Re: How to serve product images in webp format

This is extension for Magento 2. My question was related for Magento 1. Yireo has also version of the extension for Magento 1 https://github.com/yireo/Yireo_Webp

It looks though it does not work for product images which I care about the most. I guess this is because the extensions replaces links in static html but does not affect those loaded dynamically.