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 but didn't get a 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 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?

[KHALEDFARHAD]

The increase in file size despite the decrease in dimensions can be attributed to the compression algorithm used when the image is uploaded to Shopify and then downloaded from your website.

When you uploaded the original image to Shopify, it likely underwent compression to optimize loading times and improve website performance. This compression algorithm reduces the file size by removing unnecessary data while attempting to maintain visual quality. So, even though the original image had larger dimensions, its file size was reduced to 37kb through compression.

However, when you downloaded the image from your website, it's possible that the compression algorithm used during the upload process was not applied during the download process. As a result, the downloaded image retained its smaller dimensions but may not have undergone the same level of compression, leading to a larger file size of 50kb.

To address this issue, you can manually compress the image before uploading it to Shopify. There are various online tools and software available that can help you compress images while maintaining acceptable visual quality. By compressing the image before uploading, you can ensure that it maintains a smaller file size without compromising its dimensions or visual quality.

[Ken-]

Hi Khaled, thanks for the reply 

I think there's some misunderstanding, the file with it's size shown on the left of the screenshot (37kb, 2048 x 2048px) was the original file that I've manually compressed before uploading it to Shopify. Before uploading the image to Shopify, it was at 37kb; after I've uploaded it to Shopify and went to download it from the live website, the size increased from 37kb to 50kb even though the dimensions where halved based on Shopify's responsive sizing.

---

By compressing the image before uploading, you can ensure that it maintains a smaller file size without compromising its dimensions or visual quality.

---

This was what I thought, but the file increased in size rather than decrease or remain the same in size after uploading it to Shopify, and after getting "compressed" by Shopify for the live website.