What size images should I use?

Your images are the among the most utilized content on your site. They are essential for helping your visitors to convert into buyers. It is important therefore, that you configure your image sizes correctly. The most important thing to realize is that most of the preparation for your images should be done prior to upload.

We recommend choosing and sticking with an aspect ratio for your images. For instance, for the vast majority of stores using our theme we would recommend either 4:3, 3:4 or 1:1 product image ratios.

The image size options in theme editor refer to maximum sizes for large screens. As screens reduce in size, the images will automatically scale.

If you stick to the our recommendations about image ratios, there should be no reason to change the image sizes from "Optimized for theme".

Website Image Size Guidelines

Product Images

Max image width: between 640 pixels and 800 pixels

Max image height: between 640 pixels and 800 pixels

Aspect ratio: 4:3, 3:4 or 1:1

File size: max of 300 KB, but ideally, smaller (without sacrificing quality)

It’s vital to strike a balance between large images, so users can zoom in, and those that are an optimum size, so they don’t take up too much space and slow down your page load times.

Logo

Max image width: 250 pixels

Max image height: 250 pixels

Aspect ratio: 1:1, 2:3, 4:1

File size: max of 1 MB, but ideally, smaller (without sacrificing quality)

Hero Images

Max image width: between 1280 pixels and 2500 pixels

Max image height: between 720 pixels and 900 pixels

Aspect ratio: 16:9 or 4:3

File size: max of 1 MB, but ideally, smaller (without sacrificing quality)

Here’s an example of a hero image in action:

Please note that on certain themes we have implemented maximum heights at specific screen sizes to ensure the best user experience and maintain the overall aesthetics of the page. This means that the full image may not be visible at certain screen widths, ensuring that the carousel images remain visually appealing and do not disrupt the flow of other content on the page.

🚀 Need to Showcase Your Full Image?
Explore Our Development Credit Packages for Effortless and Hassle-Free Customization!

Featured Category Images

Max image width: between 1280 pixels and 2500 pixels

Max image height: between 720 pixels and 900 pixels

Aspect ratio: 4:3, 3:4 or 1:1

File size: max of 1 MB, but ideally, smaller (without sacrificing quality)

The large image size serves a purpose, even if they may not appear bigger than the product images on the home page. Whether the "Hide Category Image on Category Page" option is turned on or off will determine the size, as some of our themes also display a full-width image across the top of the category page.

Here’s an example of the featured categories in action:

Blog Post Thumbnails

Max image width: between 640 pixels and 800 pixels

Max image height: between 640 pixels and 800 pixels

Aspect ratio: Place the logo on a 4:3, 3:4 or 1:1 canvas

File size: max of 300 KB, but ideally, smaller (without sacrificing quality)

Here’s an example of blog post thumbnails in action:

Brand Logos

Max image width: between 640 pixels and 800 pixels

Max image height: between 640 pixels and 800 pixels

Aspect ratio: Place the logo on a 4:3, 3:4 or 1:1 canvas

File size: max of 300 KB, but ideally, smaller (without sacrificing quality)

Here’s an example of brand logos in action:

Image size calculators

4:3 (landscape)

3:4 (portrait)

16:9 (landscape)

Image Size Recommendations

Selecting the Right Dimensions for Your Images

Achieving a balance between large, zoomable images and appropriately sized ones is crucial to ensure optimal page loading times and conserve space on your website.

To maintain a consistent appearance across your products and category pages, it's important to preserve the aspect ratio (width and height) of all your images. For instance, you might consider making them all square.

The "Use as Thumbnail" image serves as the primary representation of a product throughout your store, appearing on your homepage, cart page, checkout page, and various category pages. To create a polished and cohesive store aesthetic, it's advisable to keep all your thumbnails the same size and shape.

Remember that a significant portion of your customers will be browsing on mobile devices, and square images are easier to adjust and view on smaller screens. Also, square and vertical images occupy a larger portion of the mobile phone screen, allowing customers to see more details in your photos.

Consider the File Size

Large image files can significantly impact your website's speed, particularly when accessed from smartphones. A slow-loading site increases the likelihood of visitors abandoning your page and opting for alternative search results.

To mitigate this issue, it's essential to compress large images, reducing their file size without compromising image quality. Many websites impose a maximum file size limit for uploads, such as BigCommerce, which allows a maximum of 512 MB.

You can make use of online tools like TinyPNG or Compress JPEG to assist you with compression. Simply upload your large image files to these tools, compress them to reduce their size while maintaining quality, and download the optimized files.

For optimal performance, aim for hero images that are no larger than 1 MB, while product images should ideally be around 300 KB.