webp images

Excursionist
13 0 3

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?

 

2 Likes
Shopify Partner
1843 170 537

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.

I turn coffee in to code - since 1998
0 Likes
Excursionist
13 0 3

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?

0 Likes
Shopify Partner
1843 170 537

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?

I turn coffee in to code - since 1998
0 Likes
Excursionist
13 0 3

Thanks,

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

0 Likes
Shopify Partner
1353 20 188

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

https://sections.design tips, tricks & Shopify sections
0 Likes
Excursionist
13 0 3

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

0 Likes
Shopify Partner
248 9 49

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.

0 Likes
Shopify Partner
1843 170 537

@Paul_West wrote:

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


Not necessarily.

I turn coffee in to code - since 1998
1 Like
Shopify Partner
248 9 49

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

0 Likes