How to get webp images from shopify hydrogen storefront api?

[devanshdixit]

Hi, we are trying to load web optimized images, we heard that Image component from hydogen-react allows to convert the images from jpeg to webp format, but not able to figure out how can I do that.

[wizardlyhel]

All you have to do is use the image url that you query from storefront api. The url itself may not be in webp format but when used in a Chrome browser, you should observed that the image is in webp format.

Shopify CDN handles the format of the image for you. This way, your own code doesn't need to worry when to use webp or when to use another format. Shopify CDN will always choose the best optimization and format for the given browser technology