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
🙄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.
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.
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.
Shopify now supports WebP. Not sure if it's just Plus though. From the Plus update team this weak:
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?