To allow our images to work on mobile, tablet and desktop seamlessly, we use a principle called Background Cover.  This means that, using stylesheet mastery, we stretch images to always fill the desired “container”.  Whilst doing this, we also centre the image.  Our containers come in varying dimensions, some landscape, some square, some portrait, so it’s important to make sure you upload an appropriately sized image.

We recommend square images around 1600px to 1800px wide. (Don’t worry, we scale these down for mobile and tablet.)

There’s no maximum image dimensions, however, if your image is too small, when it’s stretched to fit it will lose its quality.  The minimum dimensions we would recommend are 1000px x 1000px.

In the screenshot below, a square image is stretched to fill its container.

However, the container is landscape, which means that some of our image is clipped and not visible.  What the customer sees is the image within the black border.  The rest is hidden.  As a result of the clipping, some of the image details won’t be visible on your site. 

That's fine - if the details are minor.  You need to consider if the information that has been clipped is important.

No padding (white space around the edge) is applied to the image once it is uploaded, so you also need to consider this when you are creating your images. If the image is cropped tight against the product it depicts, this means it will appear flush against the multiple images below it.

You can see in the example below, when there is no white space around the image, the effect this has when there are multiple product images:

The amount of white space to leave around the image will depend on the image itself.  For example, if the product in the image is larger horizontally than it is vertically, then there may already be sufficient white space to avoid a situation such as the above.