If you have come to this page to find information relating to image sizes, we have listed our recommendations below. We do highly advise reading through this entire guide as there are some common mistakes you can avoid and approaches that you should be aware of when it comes to images in all themes.
What size images should we use?
Short answer: As large as you can in terms of dimensions, and as consistent in shape as possible across your site, i.e. the height to width relationship (or aspect ratio) should be the same. Shopify takes the images you upload and creates different sized versions of them to help with loading and displaying the correct size on whichever device the customer is using. For example, if your customer is on mobile, Shopify will display a much smaller version than on desktop.
For products, the image is generally not going to be displayed as big as a Slideshow or Banner so you can get away with using smaller images. Keep reading for our suggested sizes.
Aspect ratio and why it’s important?
To gain a better understanding of aspect ratio and why it’s important and different to actual dimensions, we suggest reading this guide by Shopify and watching this short video on YouTube.
In short, the number of pixels along an image’s edge doesn’t matter, provided that the aspect ratio is the same. As a simple example, if you have an aspect ratio of 4:5, the image can be 400px x 500px, and also 800px x 1000px – these images are different in height and width, but they have same relationship between the two sides in each example.
Equally, if your image ratio is square (1:1), you can have any size images with equal length sides – a 300px x 300px image still has a 1:1 ratio even when it’s 1000px x 1000px.
Image cropping on mobile
If you have a banner image that looks amazing on desktop but when viewing the same image on mobile it appears cropped, there are a number of things you can do to show the full image.
Firstly, to help you understand why this happens, we suggest checking out this Shopify article: Good Practice Guidelines for Images.
In the article above, the Slideshow section is referred to, but the same approach still applies to ‘Gallery’ and any other image-related sections.
In our themes’ settings, we often provide multiple options for how your images can be displayed. One example would be an option called ‘fixed height’.
In terms of your image height, you may assume that “the bigger the better” is the best path to choose. This is indeed correct if your image is square or portrait in orientation, but if you are using a banner, which is in most instances (horizontal letterbox / landscape orientation) in shape, you will want to decrease the image height value in order for it to best fit on the screen.