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?
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.
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?
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?
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.
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.
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.
When you upload a jpeg to shopify they will recompress it at their default compression level