If you have come to this page to get a suggested pixel size, we have recommended sizes, but 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?
- Aspect Ratio & why it's important
- Slideshow/Banner Sizes
- Product Images
- Collection Images
- Blog Page Images
- Favicon Images
- Image Cropping on Mobile
- Image Size limit
- Image Compression
- Blurry / Fuzzy Images
- Image Colour Different To Original
- Image Resizing Applications
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 whatever device the customer is on.
So if your customer is on mobile, Shopify will display a much smaller version and then on desktop, they will display a bigger version. But don't let this scare you into thinking you need to use big and bold images for everything to get the best quality.
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 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 have a great little article that explains this concept brilliantly also!
The reason why the pixel size doesn't matter as much because if the Aspect Ratio shape falls in line, the images will appear correctly next to one another. Below is an example of a collection page with images 1&2 having the same Aspect Ratio and 3&4 having the same but not matching 1&2.
As you can see, the two images don't match and cause the page to extend longer which doesn't look very pleasing to the eye and is a common mistake with a lot of stores.
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 because Shopify will take care of that. Just make sure it's not too small so that Shopify has scaled it up where you may lose quality.
Slideshow/Banner: Recommended 1500 x 1000px
Aim for 1500 px wide. The height doesn't matter but we suggest using rectangle shapes for these so 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.
You don't have to exactly match this, but try to make sure all your images match to get a better-looking slideshow.
If you want your banner or slideshow to be smaller in height, you will want to make the height of your image less. So you could do 3 by 1 instead, so 1500px wide by 500px height.
Product Images: Recommended 1000 x 1000px
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 a different Aspect Ratios they will look unbalanced.
Collections Images: Recommended 1500 x 500 or 1000px
Collection images would be best following the slideshow/banner method like above but with a 3 by 1 Aspect Ratio so your customers if the theme displays the banner so 1500px by 500px so that the customer doesn't have to scroll too far down the page to see your products on the page.
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. Using JPG files are not supported on any themes.
The ideal size for a favicon is either 16x16 pixels or 32x32 pixels. If your favicon file is too large, then it will be reduced to 32x32 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.
Blurry / Fuzzy Images
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