What are the ideal product image sizes?
We recommend using hi-resolution product images. Generally this means a minimum of 800×800 pixels. Most of the product images that you see in our demo stores (here, here, and here) are at least 1200 to 1500 pixels in width/height.
Using very high-resolution images (i.e. anything over 2000px in width or height) can mean slower loading times – particularly for customers who have slower internet connections. For this reason, we always recommend compressing your images before you upload them to your store.
Most images can be compressed to a file size about 70-80% smaller. Compressing simply means to reduce the file size of an image, while maintaining its image quality. Some popular online compressors are compressor.io, ImageOptim, and TinyPNG. Personally, we like ImageOptim the best because you can download it onto your computer (which means it’s easier and faster to compress many images at once) and it’s free.
Aspect Ratio (?)
There are a few different layouts for the product page. These can be changed in the Theme Settings under the Product page section:
Layout 1: Product images are displayed in containers that have an aspect ratio of 3:2 (i.e. images that are wider than tall, aka “landscape-oriented images”), with alternating rows of one image (that takes up the full width of the page) or 2 images (with two images each taking up half the screen width).
Layout 2: Images images are displayed in containers that have an aspect ratio of 3:2. All images appear on rows of two.
Layout 3: The first four images are displayed in containers that have an aspect ratio of 3:4 (i.e. images that are taller than wide, aka “portrait-oriented images”). Images after this are displayed in a 3:2 container on rows of two.
You can see examples of what each of these layouts looks like here.
Additionally, you have two options of how your product images will fit in these containers. This setting can be changed in the sub-section called Image Handling:
Fit within box: This will ensure that your product images are always fully visible by shrinking them until they fit entirely within the containers described above. This is the recommended setting if you images do not match the aspect ratios of the containers described above, and it is crucial to show the entire product image.
Fill box: This will ensure that the containers are completely filled with your product images. This setting is ideal if you have images that match (or are similar to) the aspect ratios described for each of the layouts above – or if it is fine to have some of the edges of your images trimmed.