If you have come to this page to get a suggested pixel size, we have some recommended sizes.
We highly advise reading through the guide as there are some common mistakes you can avoid and information that you should be aware of when it comes to images in themes.
What size images should we use?
Short answer: As big as you can, and as consistent shape as you can (i.e. aspect ratio). 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.
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. I will give the suggested sizes below.
Aspect ratio and why it’s important:
To get a better understanding of the aspect ratio and why you should care about it more than actual sizes, I highly suggest watching this short video by Shopify
Shopify has a great little article that explains this concept brilliantly also!
In short, the pixel size 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 – they are different sizes, but the same shape.
Equally, if your image ratio is square (1:1), you can have any size images with equal length sides – a 300px x 300px image, is still a 1:1 ratio when it’s 1000px x 1000px.
Below is an example of a collection page with images 1&2 having the same aspect ratio but 3&4 having a different one.
As you can see, the images are not of uniform shape, 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 make them the same aspect ratio. Here is an example of 4 images being all the same aspect ratio but different sizes when uploaded. So if you follow the rule, you should always have a nice layout regardless of the size image you upload. Just make sure it’s not too small – if it gets scaled up for larger screens, you may lose quality.
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 normal slideshow that doesn’t stretch the full width across the page which some of our themes offer. The height is down to 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. To understand the Aspect Ratio, check out the video guide above if you scrolled past it, which covers it perfectly.
Make sure all your images are the same aspect and size to get a better-looking and consistent slideshow. Experimentation is key 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×1 aspect ratio of 1500 x 500px as in order to reach the width, you won’t get any of the images cut off.
Product images: recommended 1000 x 1000px (min)
These are generally best displayed in square shapes but again you can use your desired shape, just try to make them all the same Aspect Ratio to get the best look on collection pages. If you use different Aspect Ratios they may look unbalanced.
Collections images: recommended 1500 x 500 or 1000px
Collection images are best following the slideshow/banner method like above but try a 3 by 1 Aspect Ratio. If the theme displays the banner at 1500px by 500px your customers won’t need to scroll too far down the page to see your products.
Blog page images
This is theme-specific really, so my best advice here would be to look at the demo store of your theme 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
You have a great banner image that looks amazing on Desktop but when you view it on Mobile, it’s cropped and you would like to show the full image. Sounds simple but there are some things you need to be aware of that may not seem apparent at first.
To help understand why this happens, I suggest checking out this Shopify article that paints a great picture of the reason why this happens and also gives great advice on how you can avoid it. They mention the Slideshow section but this also applies to Gallery and other image-related sections
In our themes, you will normally encounter options for image sizes, and one will be fixed height and your go-to thought is the bigger the better, yes if your image is square or taller, but if you are using a banner styled image, you will want to drop the number lower in order for it to fit on the screen.
Below is an example of when the height is nice and low, it can display the full image I have added on mobile
Now here is an example when it is set to a really high number.
It’s just not possible to have it nice and big and show in full. Reduce the size to reduce the cropping on the side.
Supported image formats
Shopify supports the following image formats. Uploading anything else is not going to work. This is something that is controlled by Shopify and the theme has no control over what file types can be used.
- Progressive JPG(Info Link)
Image size limit
20 Megabytes is the size limit
4400 by 4400 pixels dimensions limit (Any bigger and you may receive an error from Shopify admin)
When you upload images to the admin, Shopify will compress them. This is not controlled by the theme and there is no way to disable this. For details and a breakdown of how much compression happens based on file type, you can check out their support article linked below.
If you have added an image but when you go to view it on the website and it looks bad. Check the size of the image. It is likely that the image is smaller than the recommended size required or that you are using the Shopify RTE section and set the image size to be too small. What happens is, the admin takes the image and stretches it like elastic. Yes, it can reach, but it won’t look the same. Try uploading a larger version of the image if this happens.
If you are inserting an image into the Shopify text editor, be sure to check the size options because you can double click the image and change the default size 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 may not support it. This is not something that the theme has any control over this is again controlled by Shopify.
Image resizing applications
If you want to make some changes to your images but don’t have access to professional and expensive tools, you can try checking out some of the following:
Resizing in Bulk
Resizing Images through Shopify Apps