webp images

Alan15
Shopify Partner
121 27 51

Hi,

To try and speed up my pages I have been creating webp versions of my images.

If the browser supports webp, then I load the webp file, if not I load a jpeg.

What I find when I inspect the page is that the webp files that load have a much bigger file size than the ones I uploaded to Shopify (nearly 2 times the size) and are actually bigger than the jpeg versions.

The jpegs have a size as expected (actually a little smaller than the ones I uploaded).

Does anyone understand why this is happening?

 

Replies 15 (15)
KarlOffenberger
Shopify Partner
1873 184 863

Shopify doesn't support WebP yet. You can use WebP images in your assets and they wouldn't do anything to them, but can't use WebP for product images etc. because they'd be re-compressed to some default of sorts which as you noticed is less than optimal.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Alan15
Shopify Partner
121 27 51

Thanks for the quick reply.

These images are currently in the assets folder (probably not the correct place for them) and they are not product images, just some images on the homepage etc. so I thought it was ok to use webp in these cases.

Do you think it's better to just use jpg instead, that the webp files are being altered before being displayed?

KarlOffenberger
Shopify Partner
1873 184 863

Hmm... haven't tried it with WebP to be honest, but it does surprise me that Shopify would do anything with images in assets folder. Will need to check later and get back to you - or someone else may already know?

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Alan15
Shopify Partner
121 27 51

Thanks,

It displays the webp image and it looks fine, but the file size appears to be much bigger than the one I uploaded.

Mircea_Piturca
Shopify Partner
1540 43 333

Hey @Alan15 

WebP is great! I usually use it when I need transparency, instead of png.

JPGs can be fairly well optimized and it may not worth the trouble.

 

I store those WebPs in the Files folder and Shopify should not reprocess those and bloat the image size.

Do you have a lie example? curious to see.

 

Thanks

Finally—Add variant descriptions to your products
Alan15
Shopify Partner
121 27 51

Hi,

For example here: https://www.sydney-brown.com/ 

When I inspect the page I see the homepage image loading with a size of 638KB, but the webp file I uploaded to the assets folder was only 411KB.

Maybe I'm not reading this correctly?

Anyway maybe I will just stick with jpgs and optimize them more, at least it reduces the number of files I need to upload.

Thanks for your help.

Alan

Paul_West
Shopify Partner
250 9 65

When you upload a jpeg to shopify they will recompress it at their default compression level, and that will likely change the size of the file and its quality. This is why you should ideally upload pretty high quality images first.

 

They also don't apparently support webp so not sure how you are dealing with that other than to store them in files area?

 

The webp format does well with lossless images that you might've used png or gif for. Not sure how it stacks up against jpeg. But from what I read it only saves maybe 20% or so at most.

KarlOffenberger
Shopify Partner
1873 184 863

@Paul_West wrote:

When you upload a jpeg to shopify they will recompress it at their default compression level


Not necessarily.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Paul_West
Shopify Partner
250 9 65

That's a vague response. What DO they do? In my experience they will recompress anything over around 85% compression.

KarlOffenberger
Shopify Partner
1873 184 863

🙄The link I refer to is the response - a table outlining the conditions when and how Shopify will compress images published by Shopify. How's that vague? It just states they don't necessarily recompress every image which you initially stated they do.

 

Best wishes!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Paul_West
Shopify Partner
250 9 65

Sorry, I didn't realize your 'not necessarily' was a LINK... i saw it underlined but thought you were just doing that for emphasis.

Alan15
Shopify Partner
121 27 51

Thanks for the updates. I didn't know about that shopify compressed the images, that explains why the jpegs are a little smaller than the ones I uploaded. I'm not sure what happens to the webp files, but I'm not saving much, if anything, by using them, so i'm going to use jpgs for now.

Paul_West
Shopify Partner
250 9 65

Yeah they claim on average webp can save up to 25% vs jpeg, but not sure if that holds up in practice, somewhat depends on the image. And if you're really interested in optimizing page speed, then I'm not sure making images 15-25% smaller is really going to do it. You'd be much better of lazy/late/on-scroll loading images below the fold rather than loading an entire page full of slightly smaller files.

 

I hear there is another new image format in the works, which will be open source and supported by all browsers, based on a video compression method that gets way better compression rates than webp, but it may not be available for another year or so.

Josh_Uebergang
Shopify Expert
853 30 214

Shopify now supports WebP. Not sure if it's just Plus though. From the Plus update team this weak:

https://developers.google.com/speed/webp/

Run Google Shopping ads? Get the free definitive guide to Google Shopping for Shopify (no optin required): https://www.digitaldarts.com.au/google-shopping
azacs
Shopify Partner
9 0 15

In my experience outside of shopify, webp can be significantly faster than jpeg. In part because the compression is good enough that I often compress webp much more than I normally compress jpg.

What I'm finding is that the webp images served by shopify are much larger than I would make them.

For example, this image uploaded to shopify, shopify serves the webp version at 742kb for the 3000x version. 

The same image on my own server gets compressed to 140kb for the 3000x version and the quality is still great for my needs. Why is the shopify version 5x bigger?