If you have come to this page to get a suggested pixel size, we have recommended sizes, but we highly advise going 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
- 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(IE Aspect Ratio). Shopify takes the images you upload and creates a different sized version's of them to help with loading and displaying the correct size on whatever device the customer is on.
So if they are 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 but I will give suggested sizes below.
Aspect Ratio and why it's important:
To get a better understanding of Aspect Ratio and why you should care about it more than actual sizes, I highly suggest watching this short video by Shopify to help better understand it.
Shopify have a great little article which 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 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 pix 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 Aspect Ratio, check out the video guide above if you scrolled passed it which covers it perfectly.
You don't have to exactly match this, but try to make sure all your images match whatever shape 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 different Aspect Ratio 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. Customer doesn't have to scroll too far down the page to see your products to start seeing them 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.
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.
- JPG
- JPEG
- Progressive JPG(Info Link)
- PNG
- GIF
Click to see full Shopify details on Supported Image Format Types
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)
Image Compression
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 breakdown of how much compression happens based on file type, you can check out their support article linked below.
Click to see full details Compression Rates
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.
Click to see more information on the topic of Color Profile and suggestions to help
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
Resizes individually
Resizing Images through Shopify Apps
Some useful Shopify blog articles:
Is your awful product photography losing you sales?
Free and paid online photo editor tools for gorgeous DIY product photography
