Shopify Image Sizes
Getting image sizes right for your Shopify store isn't hard. You do however want to stay within some minimums and maximums, and then stick to your decision to be as consistent as possible for a better user experience for your customers.
Image Dimensions
Square1:1 Aspect Ratio |
Wide16:9 Aspect Ratio |
Legacy4:3 Aspect Ratio |
|
|---|---|---|---|
| Minimum Sizes | 1280 x 1280 | 1280 x 720 | 1280 x 960 |
| Standard Sizes | 1920 x 1920 | 1920 x 1080 | 1920 x 1440 |
| Maximum Sizes | 2560 x 2560 | 2560 x 1440 | 2560 x 1920 |
| What is best for what |
|
|
|
What if I need a different dimension?
If you need a wider aspect ratio for a leaderboard banner image for instance, then think about the "longest edge".
The values above are all width by height (x by y) and since they're all landscape the width is the longest edge. Take that x value (eg: 1920px) for the longest edge of your image(s) and make the other value what you need for it to fit it's purpose.
Image dimensions are very "use dependent". If your use demands a specific aspect ratio, then that is what you should use. The guide above really just defines the minimum longest edge if you want to keep your images crisp and clear without being oversized.
Segue.
Image File Size
The short answer to the size question:
"as small as it can be without damaging quality".
If you don't know already - image size and image file size are two different measures. The one is the dimension of the image, measured in pixels, and the other is the weight of the image measured in kilobytes or megabytes (preferably the former in your case).
Shopify does an excellent job of ingesting and optimising your images for your customers to view them fast and in great quality, but it can only do so much with what you give it.
For this reason we always recommend running your images through one last "preprocess" of optimisation before uploading to ensure that Shopify has the leanest, meanest, lightest and fastest pics to work with.
How to optimise your images
For small batches, TinyPNG is an excellent tool for this and if you know how, they also have an API to incorporate their functionality into your own workflow. They offer a generous 500 free optimisations, beyond which you'll need to go onto one of their paid plans.
Example optimisation:
-
Take your original image
Ours was a 2.4MB download of a DALL·E 3 generated pic of a boot. -
Export it to the .jpg* format
This brought it down to 1.6MB (via Figma). -
Optimised in TinyPNG
This dramatically brings it down to 0.5MB.
That's an 80%** reduction, and if you look at the difference between the original and the optimised they are practically imperceptibly different to the human eye.
* Image file types is another topic, but we deemed .jpg to be the best for this test.
** Fine, 79.65%. Sue me.
Other tools like Canva, Figma, Photoshop, Affinity etc. will all have ways to optimise your images to some degree, and your preference of tool will vary. Just be sure you've optimised them the best you can, and Shopify will take care of the rest.
Shopify's CDN (content delivery network) takes your image and generates multiple versions of the original which are then ready to be used for different purposes by the theme or however those files are accessed.
If your theme is good, you're following best practices
Why this page exists
We're asked this question by practically every single ecommerce merchant client for the last decade. We therefore created this page to serve as an easy link to the answer.
Please email us if you have anything to suggest or even any erratum you spot.
Summary
Your goal should be to upload the highest quality images you have (ideally around 2048 at the longest edge and at the lowest quality that still looks good). The theme's code (should) and Shopify's CDN will take care of creating and serving the smaller, optimised files to your customers and search engines.