Image size guide
Whenever you upload an image to the theme editor, Shopify creates different sizes of that image and will serve appropriate size for different devices or browsers to ensure better performance — but you'll still have to compress images so they’re not too large to begin with.
When creating images for your store, we recommend the following dimensions:
2048px for full width images
1536px for three-quarter width images
1024px for half width images
768px for quarter width images
400px for icons images
Most common screen sizes
According to W3schools 1366px wide x 768px high is the most popular screen resolution as of January 2020 (not including mobile devices).
Product images
We recommend using product images with dimensions from 1024 x 1024px to 2048 x 2048px for best results. However the most optimal size and aspect ratio of product images can be dependent on the type of product.
For example, products such as jewelry made need to be saved at a larger size to allow for zoom functionality.
Consistency is key!
To make your product images appear uniform side-by-side, you need to use a consistent aspect ratio, or width-to-height ratio. For more info read Shopify's guide on image aspect ratios.
Aspect ratio settings
Compatibility
Aspect ratio settings are available for the following themes:
- Beyond - versions 2.6.3 and up
- Blockshop - versions 8.6.3 and up
- Maker - versions 7.6.3 and up
- Emerge - versions 5.6.3 and up
Aspect ratio settings give merchants more control over images compared to height settings. Instead of fixing a height, aspect ratios use the width of the image and the natural dimensions of the image provided.
Our aspect ratio settings range from 24 to 200 in desktop, and 32 to 200 in mobile. This is calculated using:
aspect ratio = 100 * [ image height ] / [ image width ]
With a fixed image width (eg. 100% of the screen width in mobile), that means that the higher the aspect ratio, the taller the image will be.
Overlayed text
When text is overlayed on an image the aspect ratio can be compromised to prevent the text from overflowing.
As a result, as you move the slider from left to right, your image will start from landscape towards a portrait aspect ratio.
Slideshow images
Compatibility
The below guide is only valid for themes that don't support aspect ratio settings
Slideshow images will adjust their height based on the dimensions of the image uploaded. Images with wider width-to-height ratios will result in sliders with a smaller height and vice versa.
