webp images

Alan15
Pathfinder
93 21 25

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?

 

KarlOffenberger
Shopify Partner
1868 184 819

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
0 Likes
Alan15
Pathfinder
93 21 25

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
KarlOffenberger
Shopify Partner
1868 184 819

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
0 Likes
Alan15
Pathfinder
93 21 25

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
Mircea_Piturca
Shopify Partner
1489 42 317

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
0 Likes
Alan15
Pathfinder
93 21 25

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
Paul_West
Shopify Partner
248 9 63

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
KarlOffenberger
Shopify Partner
1868 184 819

@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
248 9 63

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

0 Likes