How to Prevent Your Images From Getting Cropped

Cropped images are a common issue when designing a website. Here is our answer to why your images are getting cropped and how you can prevent cropping.

Understanding Image Aspect Ratio

The ratio between the width and height of your image is what forms its aspect ratio. Let's take, for example, 16:9. The first number (16) refers to the width and the second number (9) refers to the height. If you upload a 16:9 image to a 1:1 section, your image will be cropped due to the difference between the width and height of the section and your image. Cropping prevents your picture from being stretched and deformed.

However, if you upload an image with the same aspect ratio as the section, your image will not get cropped.

How do I get the aspect ratio that the section requires me to use?

You will need to crop the image placeholder of the section to get the image resolution.

For Windows users, you must turn on your snipping tool to crop out the image section.

For Mac users, click Command + Shift + 4 to turn on the screen cropping tool.

Go to the section which you would want to get the image aspect ratio of:
 Here is how your cropped image should look like, be sure to be as precise as possible:
Save the image on your desktop, right-click on it and click on properties or file info. From there, you must locate the dimensions of the image to use them to calculate the aspect ratio.

Windows:

Mac (We will be using the dimensions from the Windows reference photo):

In this situation, we will be working with 467x468. Use this aspect ratio calculator to identify the aspect ratio that you must use: https://ww.digitalrebellion.com/webapps/aspectcalc.

After doing this, you now have the aspect ratio of the section, and you know what image resolution you need.

Note: Your image resolution can be different and still have the same aspect ratio as shown in the example below:

Always select a low-mid resolution because it will make your images lighter and will greatly improve site speed. 

Let's upload a 1000x1000 and 1920x1080 image into the section that we just worked with:

- 1000x1000 Dimensions / 1:1 Aspect Ratio

- 1920x1080 Dimensions / 16:9 Aspect Ratio

How both images get displayed on the store:

Since the 1000x1000 image has the same aspect ratio as the section, it does not get cropped as supposed to the 1920x1080 image.