Although all our themes are created to accommodate images of any size, the optimum dimensions we would recommend are as follows (for additional reference, these dimensions are in use on our very own demo sites):
Home page slideshow - 2600 x 1000px for larger screens / 2000 x 900px for more popular laptop and desktop sizes
Products - 2000 x 2000px for a square image, 2000 x 1800px for landscape images and 1600 x 2000 for portrait images.
Collection - 2000 x 175px for a banner image at the top of the page, 480 x 320px for a feature image.
Image gallery - 1250 x 650px (this is dependent on your choice of layout)
Image with text - 1200 x 800px
Blog posts - 1000 x 350px
Checkout Banner Image - 1000 x 400px
There are no specific recommended image sizes for Mobile View other than the above dimensions, as the theme will automatically adjust this to suit on mobile.
However, this is made tricky, as no screen size or device is exactly the same - desktop monitors are predominantly landscape in orientation whereas mobiles are mostly portrait, meaning some of the images will need to be cropped slightly to fit mobile - a horizontal rectangle can never fit into a vertical rectangle exactly.
We suggest using images which match our specified desktop dimensions and make sure that these have the main point of visual interest in the centre so that when they appear on mobile, they are still clearly visible and look great.
Our themes have a built-in 'Auto-height' setting, which uses mathematics to provide enhanced visual consistency and continuity across your site.
If your storefront looks clean and tidy, with well-organised images, it is likely this will translate in the customer’s mind as meaning the store is well run and managed in the areas they can’t see.
Enable this method to boost your customers’ confidence and trust in your store:
Online Store → Themes → Customise
Navigate to a collection page in the right-hand-side preview window
Using the left-hand settings panel, select "Collection Pages"
Choose "Enable auto-height"
Differences such as upright images next to horizontal images, or closely cropped images next to others with unneeded white space as part of the image composition in the images themselves, will all have an effect on how the images sit next to each other, and how they are aligned on the collection page.
Once these images have been cropped to have the same aspect ratio, your images should then display in a uniform manner.
Slideshow images always take up the full width of the page - this is controlled automatically by the theme to make sure the horizontal length of the image continues edge to edge on your customer's screen, no matter what device they're using.
If this was not the case, the image would finish before the page does and customers would see a gap where the image ends, revealing the “naked” website behind, creating an odd look.
To make your Slideshow images less tall, you would need to reduce the height, independently to the width.
This is due to the aspect ratio, explained in more detail below.
The aspect ratio can initially seem a bit of confusing jargon - but put simply, it is the relationship between one side of an image and the other (height and width).
There is a handy video by Shopify here that explains aspect ratio in more detail:
We recommend keeping all of your product images in the same aspect ratio, whether they are square, portrait or landscape.
A square has the same width as it does height.
This would be written as 1:1 - for every 1 unit of height, we require 1 unit of width.
If we have an image of 10px height, it must also have a width of 10px width, otherwise, it ceases to be a square and will appear stretched and distorted.
This image below is 450 x 450 px, making a nice clear square image:
This would be true if we re-size this example to 100 x 100, or 1000 x 1000 - although the number is getting bigger, the ratio is the same.
Following on from the above description of a square’s aspect ratio, a rectangle has a different width than it does height - meaning the ratio changes.
For example, it could be twice as wide as it is high, which would be written 1:2.
It could be 10 times wider than it is high, creating a wide but thin image, which would be written as 1:10.
For images, however, we are talking about pixels and how many we need for our desired result which is an image that is not stretched or compressed, but proportionate.
For example, the width of the above image was doubled to 850 x 425 px, making a perfect 1:2 aspect ratio but badly distorting the image as it was designed to be a square image, not a landscape one:
A common ratio for a portrait image is 8:10 - when translating this into pixels, this could be 80 x 100 px for a tiny image, or as noted above 1600 x 2000 for a large, HD image.
Regardless of whether its size has changed to take up a postage stamp, or a billboard - the image's aspect ratio must remain the same, or we end up with an image which looks visually off-putting.