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

[Ken-]

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?

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

Shopify uses a dynamic system to customize image dimensions according to the screen resolution of the user, allowing them to view responsive images. Through the conversion of image URLs to CDN links, Shopify further adjusts the image size based on the user's network speed. If the network speed is optimal, the CDN will reload the image instantly. Conversely, if the network speed is slow, the image size may be heavier for the user.

Do let me know in case of any concerns.

Regards,

San