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:
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.
Below is an example of a collection page with images 1 and 2 having matching aspect ratio, in landscape orientation. Images 3 and 4 also have matching aspect ratio but are portrait in orientation.
As you can see, because of their orientation, the two pairs of images display in a non-uniform manner, causing the page to extend to fit both ‘portrait’ and ‘landscape’ images in the same row. A theme can do a lot of things, but it can’t take images and automatically make them the same aspect ratio or orientation. If it was to do this, it would result in excessive cropping or stretching of the images. Here is an example of 4 images being all the same aspect ratio but using different dimensions when uploaded. So if you follow the rules above, you should always have a nice, tidy layout. Just make sure your images are not too small – if these get scaled up for larger screens, quality may be compromised.
Slideshow / banner: recommended 1500(min) x 1000px – Full width Slideshow 1500(min) x 500px
Normal Slideshow: Aim for 1500 px wide as a minimum when using a slideshow section that doesn’t stretch the full width across the page (some of our themes offer full-width slideshow). The height can be your personal preference, but as a starting point we suggest using rectangle shapes for these; aim for a 3 by 2 aspect ratio. So if your width is 1500 the height would be 1000.
Make sure all your images are the same aspect ratio and size to get a better-looking and consistent slideshow. Experimentation is key here!
If you missed the video earlier in this article, outlining aspect ratio, please view this here.
If you want your banner or slideshow to be shorter in height, you need to make the height of your image smaller. Try 3 by 1 instead, eg. 1500px wide by 500px height.
Full-Width slideshow: You should aim for a 3 by 1 aspect ratio of 1500 x 500px to reach the true edges of the screen and not have these cropped off to the left and right.
Product images: recommended 1000 x 1000px (min)
These are generally best displayed as squares, but again you can use your own custom shape, just try to make these all the same aspect ratio to get the best look on collection pages. If you use a square for one, you must use a square for all the others, so they align perfectly. If you use different aspect ratios, they may look unbalanced and misaligned.
Collections images: recommended 1500 x 500 (or 1500 x 1000 for a taller image)
For collection images, it’s best you use 1500px by 500px which will appear as a horizontal letterbox in shape, so your customers won’t need to scroll too far down the page to see your products below. If you would prefer an image with more height, you could use a 3 by 2 aspect ratio, like 1500 x 1000px.
Blog page images
This is theme-specific, so our best advice here would be to look at the demonstration store of your theme (by searching for this on the themes store and clicking the “view demo store” button) and check out the blog section. You should be able to tell if it’s using a square or a rectangle-shaped image.
Favicon images need to be in PNG or ICO file format. JPG files are not supported on any themes.
The ideal size for a favicon is either 16×16 pixels or 32×32 pixels. If your favicon file is too large, then it will be reduced to 32×32 pixels when you upload it to Shopify.
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
Note: 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.
To illustrate this, below is an example showing what happens when the image’s “fixed height” is set to 280px. This will then display the full image on mobile:
Now here is an example of when the “fixed height” value is set higher, to 680px:
So you can see that as the height is increased, so is its width, to maintain correct proportions. If this was not the case, images would appear stretched and distorted. It’s simply not possible to force an image to fit a screen fully if it does not exactly match its aspect ratio. So you must reduce the height of any image where you are looking to prevent cropping either side.
Supported image formats
Shopify supports the following image formats. Uploading anything else will not work. This is controlled entirely by Shopify, with no theme having any impact over what file types can be used.
- Progressive JPG (Info Link)
Image size limit
- 20MB (Megabytes) is the size limit for images – or any other file type used on the Shopify platform.
- 4400 x 4400 pixels is the dimensions limit – if you try using anything bigger, you may see an error in the Shopify admin area.
When you upload images to the Shopify platform, it will compress them (to make them smaller in file size). This is not controlled by the theme and there is no way to prevent this from happening. For details and a breakdown of how much compression takes place, based on file type, you can check out Shopify’s support article linked below:
Blurry / fuzzy images
If, when you have added an image, it does not look as sharp as you were expecting on your storefront, the first step is to check the original dimensions of the image. It is likely that the image is smaller than the dimensions we recommend applying or that you are using the Shopify RTE (Rich Text Editor) and have “overstretched” the image in here. A common misconception is that by expanding the image size in the Rich Text Editor, the quality of the image will upgrade along with this. The original image contains a certain number of pixels and whilst the area the image covers can be stretched like elastic, if there is not an adequate number of pixels to fill this space, the quality (resolution) will deteriorate. Uploading a new version of the image with increased dimensions should overcome this.
Note: You can double click any image added in your Rich Text Editor and change the sizing here.
Image colour different to original after uploading
Some images can store data known as a colour profile which Shopify may strip out because some devices do not support it. This is not something that the theme has any control over and is again dictated by the broader Shopify platform.
How to change the Gift Card image
Please follow these Shopify instructions which explain how to change your gift card image.
Image resizing applications
If you want to make some changes to your images but don’t have access to professional and expensive editing tools, you can try checking out some of the following:
Resizing in Bulk:
Resizing images through Shopify Apps: