What size should my product photos be?

What size should my product photos be?

Martin Cox

The answer to our most commonly asked question.

When building an ecommerce website, this is an eternal question, so we’ve created this guide for creating Shopify product photos.

Every business is different, but stick to these simple guidelines and you can’t go wrong.

Good coding, combined with Shopify’s image size parameters will do a lot of the hard work for you when it comes to presenting your product photos nicely.  But there’s some things that no code can fix.

We recommend these simple rules when creating product images:

  • Consistent aspect ratio (preferably square)
  • All images should be at least 1200 pixels wide (or larger)
  • High quality JPG format
  • White background
  • No borders

Some more detail is below.

Consistent aspect ratio


No amount of code can completely account for inconsistent image sizes.  

Make all product photos the exact same shape and size. You can’t go wrong with square images. But if your product photos aren’t suited to a square canvas, rectangular shaped images with consistent dimensions are the way to go. We recommend a 4:3 ratio.

Resolution


Shopify’s
image URL filters allow different sized versions of images to be displayed on different sections of a site.  No matter what size you specify, an image can never be resized to be larger than its original dimensions. Always err on the side of uploading an image that is too big, rather than too small.

Images should be at least 1200 pixels in width and height.  If you are using a product zoom function and want to show detailed pictures on your site, go with at least 2000 pixels.

File format

JPG format is usually the best for product images as it allows you upload high-res images without file sizes being too big. If you want product images with a transparent background, PNGs are fine.  You can upload GIFs to Shopify, but do this sparingly!

Consistent background (preferably white)


Consistency of appearance is important to the aesthetic and cleanness of the site. In most cases white backgrounds are best.

No borders

It’s easy to add borders to your images using CSS and add hover effects, change the colour or remove the borders altogether. Removing borders from image files is messy!