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

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

Ken-
Tourist
10 0 1

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?

 

inkBRKz.png

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?

Reply 1 (1)

INA_MSWEB
Shopify Partner
1250 143 160

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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin