Ideal product image dimensions

Tourist
17 0 1

Hello, I am wondering if there is an ideal image size to use for my product pages.  95% of my traffic comes from desktop.  What I have been doing so far is resizing all images to 800x800.  When I made my first product page, the images happened to mostly be 800x800 so I started using those dimensions for all my product page images without ever thinking that maybe I should be using different dimensions.  Can anyone tell me if there are ideal image dimensions for Shopify product pages?

 

Thank you!

0 Likes
Shopify Staff
Shopify Staff
352 16 50

Hello, @brightlife !

 

Karlie here from the Shopify Guru Team! Great question! So, your product images can be up to 20 Megapixels or 4472 x 4472 px. Having a file size smaller than 20 Megapixels is best when uploading to your storefront when it comes to file resolution. If your product images are square then 2048 x 2048 pixel size would be best for resolution and theme zoom-in features. If you're using the zoom-in feature in your theme customizer then you at least need a product image of 800 x 800 pixels for the feature to work correctly. 

You can be sure to follow our Product Image Guide and The Complete Guide to DIY Product Photography for an excellent Shopify image guide and resource. 

 

I hope this has answered your question. If not, or if you have any further questions please let me know. I will be happy to help!

 

*Karlie* | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Astronaut
1091 150 274

The bigger the better honestly, the reason being is that you can always resize them in your code itself as long as they're bigger than the newly specified dimensions. Say you upload a product with a default image size of 2000x2000 -- In your code on your product page inside your forloop you can specify what size you want the product image to be with a filter:

 

{% for image in product.images %}
  <img src="{{ image.src | product_img_url: '400x400' }}">
{% endfor %}

This would output all of your product images at 400x400. There's no real right or wrong answer, typically the largest you'll see your product image is taking up half of the screen on the product page itself. So if we assume your theme is using some kind of container similar to bootstrap - that has a max width of 1200px -- Anything above 600px would probably be sufficient. On our website we use 1024 x 1024 and have no issues.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes