How does Shopify resize images on upload?

Highlighted
New Member
2 0 0

In the docs I can see the maximum image size is 20MB for upload.

What I can't find is how does Shopify resize those images? If I upload 3 images, will they be resizes enough to have good performance when loaded on mobile, for example?

0 Likes
Highlighted
Explorer
76 0 12

It's a good question. I can't speak for all themes and apps, but Shopify has a clever way of dealing with this issue. The URLs where the images are located support custom size requests. So, the developer can choose what image size to request, for example adding '_small' at the end of an image URL (but before the file extension .JPEG etc) in your src attribute will request a smaller version of the file, whereas adding '_2048x2048' to the end of the URL will request this larger size of image.

 

Here's info from shopify's documentation;

" Specifies the location of the product image. This parameter supports URL filters that you can use to retrieve modified copies of the image. For example, add _small, to the filename to retrieve a scaled copy of the image at 100 x 100 px (for example, ipod-nano_small.png), or add _2048x2048 to retrieve a copy of the image constrained at 2048 x 2048 px resolution (for example, ipod-nano_2048x2048.png). "

 

Cheers,


Oli

 

——————————

Founder @ www.preproduct.io

Test and make sales for future products

 

1 Like
Highlighted
Shopify Partner
44 4 8

I always recommend first compressing your images but you should upload the largest image that you have and manipulate the image in your theme using image filters.

 

If you have an image that you want to scale down to 300x300 in one spot you could do something like this:

{{ image | img_url: '300x300', crop: 'center' | img_tag }}

If you wanted the image to appear at 1200 px width and convert it to Progressive JPG format, you could try this instead:

{{ image | img_url: '1200x', format: 'pjpg' | img_tag }}

Shopify offers a lot of options for manipulating images through Liquid.

 

They have a great blog post about manipulating images here: https://www.shopify.com/partners/blog/img-url-filter

Optimization Expert at Speed Boostr (Shopify optimization and dev agency).
Need help improving your site speed? Check out the Shopify Analyzer for real-time advice on your site.
0 Likes