Can I upload WebP images directly to product pages without quality loss?

[CozyCampfire]

I recently upgraded to a store 2.0 theme. I have a bunch of products that use GIF images. Now, Shopify seems to be converting those GIF images to animated WebP images on the website. The new animated WebP images are extremely compressed and look quite bad. To try to fix this, I created my own animated WebP with much less compression. I uploaded that WebP directly to my product page. It seems to have accepted the file and it looks much better on the website. Is uploading WebP images directly to products fully supported? Are there any downsides to using animated WebP? Also, will Shopify still convert the uploaded WebP images to other formats when the device doesn't support it?

Thank you

[Tristram]

The browsers are the things that are supporting webp, and all the modern browsers support webp. Webp is effectively fully supported across the internet (excepting really old browsers or ie11)

[dlobl]

Thank you for bringing this to our attention!

We recently started to support animated WebP on all storefronts: https://help.shopify.com/en/manual/online-store/images/theme-images#automatic-image-compression-and-... 

Animated GIFs are automatically converted to animated WebP in case the requesting browser supports WebP: This results in much smaller animated images, as WebP offers much better compression than GIF.

---

@CozyCampfire wrote:

[..] Also, will Shopify still convert the uploaded WebP images to other formats when the device doesn't support it?

---

Yes. In case the requesting browser doesn't support WebP, the animated WebP is automatically converted to GIF and served by cdn.shopify.com.

---

@CozyCampfire wrote:

The new animated WebP images are extremely compressed and look quite bad.

---

Is there a specific GIF which doesn't look right as WebP? Feel free to attach the URL, so we can have a look.

[CozyCampfire]

Thanks for the info about this. For new products, I've now been using https://ezgif.com/webp-maker to create my own animated WebP images and I upload the animated WebP directly to the product creation page instead of using GIF files. If the original product image is uploaded as an animated WebP, does the image still get converted back to a GIF if the browser doesn't support it? I know you said the images that were GIFs get converted back and forth, but what about an image that was originally WebP? Sorry if this is confusing.

Here's an example of the type of compression I've noticed from the images that were GIFs but got auto-converted: https://i.ibb.co/ZJqk357/Retro-Discord-Server-Icon-Purple.webp 

And here is how the GIF originally looked: https://i.ibb.co/fYxTqxq/Retro-Discord-Server-Icon-Purple.gif 

It seems to create strange blocky artifacts and graininess.

[dlobl · Accepted solution]

Thank you for providing an example! We are going to have a look into this.

---

@CozyCampfire wrote:

Thanks for the info about this. For new products, I've now been using https://ezgif.com/webp-maker to create my own animated WebP images and I upload the animated WebP directly to the product creation page instead of using GIF files. If the original product image is uploaded as an animated WebP, does the image still get converted back to a GIF if the browser doesn't support it? I know you said the images that were GIFs get converted back and forth, but what about an image that was originally WebP?

---

Yes. We always make sure that images - or animations in this case, are displayed correctly on different browsers. In case the original image is an animated WebP, but a browser requests it that doesn't support animated WebP, it's automatically converted to GIF again (which is supported by all browsers out there).

Does this answer your question?

[CozyCampfire]

Yes, that's exactly what I was wondering about. Thank you for the response!

[fofux]

Shopify's browser/image compatibility checks for Safari on Mac are not working correctly. I have an already made animated WebP image that works perfectly fine in all browsers, including Safari when opening it with the browser directly. I uploaded this file and embed into web page. When viewing the the image on my site it works on all browsers except safari... On Safari it serves a .webp.gif version of my original image.

[dlobl]

That's expected: Safari does not fully comply with the animated WebP standard which caused noticeable glitches and other visual issues with animations.

Therefore we had to disable serving animated WebP to Safari on iOS and macOS. For more context: GIF's Glitching