How come Shopify’s rendered responsive image is bigger in file size than the large image I uploaded

[Ken-]

I made this post under Site Speed and this post under Technical Q&A but didn't get any reply, so I'm making another post here.

I uploaded an image to Shopify that has a dimension of 2048 x 2048 with the file size of 37kb, as from what I read, Shopify has responsive images and only loads in the correct dimensions to the user based on the screen dimensions.

However, when I go to my website and download that images onto my desktop, I see that even though it’s smaller in dimension by almost half, it is bigger in file size. Dimension is 1200 x 1200 (decreased) with file size of 50kb (increased). How come it is bigger in file size when it’s smaller in dimension?

Image shows info of the image before I uploaded to Shopify vs the info of the image I downloaded from the live website

Is there a need to compress images before uploading it to the Shopify website?

[tim]

Yes, this happens quite often. 

In your case it can be in part attributed to the fact that Shopify includes Colour profile and your original image does not have it.

Shopify compression is not always the best.

First and foremost it is about resizing and then about compressing. It needs to balance between quality and size and be Ok'ish for most use cases.

Can you compress better -- absolutely.

Should you do this -- I usually do not recommend it.

If your images look good and around 100-200Kb then IMHO you're good.

The savings you're talking about here are insignificant compared to other factors in terms of site speed.

[Ken-]

---

The savings you're talking about here are insignificant compared to other factors in terms of site speed.

---

Thanks for the reply Tim. I understand the savings in site speed in minute, but I want to understand the best practice so I know how to go about doing it for all the images on the website forever moving forward.

So I should compress my image but stop at around 100-200kb? Or do I not compress it at all?

I asked on Reddit and someone say that I should not compress images at all before uploading them to Shopify, even if it's a couple of MB, is this actually true?

[tim]

That guy is spot-on.

Do not bother compressing before uploading. 

However, potentially you may make your images more compressible. 

Compression algorithm has no idea which part of the image is important and which is not.

Example -- I used to photograph jewellery on natural backgrounds. Keeping the actual item sharp and adding extra blur to the rest of the picture has almost halved sizes of my images.

Even if your image is on the solid background, out of the camera it has a lot of noice which is unnoticeable, but still exists in the image.

I was also stripping EXIF data, but do not actually remember if it did a lot to improve size and whether Shopify does it too.

My size guideline is more about controlling the results -- if you see that images served on your store are seriously larger you may need to think why and how to improve.