# 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 cropped and how to prevent cropping.

### Understanding Image Aspect Ratio

The ratio between the width and height of your image forms its aspect ratio. Let's take, for example, 16:9. The first number (16) refers to the width, and the second (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.

You must turn on your snipping tool for **Windows** users to crop out the image section.

![](https://lh7-us.googleusercontent.com/71gTWV_qsQtF8-ktx_sfDM8vUkyVprFWz2xSBzDefwB4K44SmWn_UxKLMDrevKxk6KQIKLSR2RyCPDcxVlThHMwRhEGCgEPp0anZ0BcnvqwBNPWtLP1vo34zapX1M-Ya8Nvv6amqSOO8Vbbe9_DyxIQ)

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

![](https://lh7-us.googleusercontent.com/LKVqiTs_c5wP6TrQ3Oj5IoA2z0KWN8GpzhYHQLA6eYh6a2ecqrlav09QAlJ-GjLyQrcl2rCVH6icSiON0O4GitHfjyWrw8hJLTZ73m3kxxgT6tzN11zBwM8sH9Oy1jd3n9ZsGUO7zh97Qh9uEQ-kIJA)

Go to the section in which you would want to get the image aspect ratio:\
![eccbd65c743b4ee083d7be92b5bc487b.png](https://lh7-us.googleusercontent.com/BlPWYY5KsPyu1_O_f5W2XAv_UWoEDYRCSvdx8SIjXkLYyvbl69tZ4QTYfzh7LAZDqPNv10mOKA80g4QD6o3zR682Q9Bw8gD_HlMAYN5Ma04RvQgmtxHSiuRrrq-D3rRnwpfNX69_c3tV2RQue6c8hBc) 

Here is what your cropped image should look like. Be sure to be as precise as possible:\
![8e77e1da4693ba34ecf9c571d936c537.png](https://lh7-us.googleusercontent.com/hr_m2YseGrXdFD9gkdsY9hzLVoq3Ph_uceXEipbODFNlpHodhDk-mmHwhPsY-IDGW_7D85t8bJSloysPu7Q0W8Y5DBLDx5V9KfXI_esF_W3EO14BSWDNTWNwPW2LNP-LWrO3w5cJEu_wq28idvglnPA)

Save the image on your desktop, right-click, and click on properties or file info. From there, you must locate the image's dimensions to use them to calculate the aspect ratio.

**Windows**:

![](https://lh7-us.googleusercontent.com/mRLBOlTG-0xTvCXinZPuzyronu0-x2pC7F61tFgGSkVLfwG9B-HeUdgkNObA6UXSSX-0NeNHRDs2yb-Nj8KbvMGfdUYsM2zd5tpEnZFlAdmqky476vzJ95t4-lTztjbiq1Oo4N897oybCj3Bml8jM-w)

**Mac**:

![](https://lh7-us.googleusercontent.com/LYuIorRCq_ZJdRvs3flejd7RV8mfkZSNPdBfSprzTqgz8YHhu7meXpefDAlsqXFfuzGfPMcFXgcSNthPP1WhoPRqDxkTcNBNomvzUrMQcQXKUJwpA5fn7sjP_uzLpV1VWpNZgkay_6Ail6U_SWRkflo)

In this situation, we will be working with 467x468 (Windows example). Use this aspect ratio calculator to identify the aspect ratio you must use: [https://ww.digitalrebellion.com/webapps/aspectcalc](https://www.digitalrebellion.com/webapps/aspectcalc).

![](https://lh7-us.googleusercontent.com/SyfsmWD477JbX6yUNc4mSocashRcxuUrPUlBDwvZ02TKmsV8tEjnQtwKSzCtSy7HcjfX6tmugS8mW0l9B8EFTjtq2o16PLDmy57HN7yKsPRubukolKKjPh-iir6A9Nbsn2-sOqV6EjliTTMzCIvt4xc)

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:

![](https://lh7-us.googleusercontent.com/Ds5_VaEfInTBMfrAEq-4R0DKpOVwpQBxRfnfpnc4PQBwPV7Zc-pqNc_iwUHnDOEkGHMuoKJYdVXoyJjZd-yKUuuwJvJfilw7OrAfQ7tmWv3kimzUTx9JSvwI5JZhkqEpvFFh6t6xInZUDVE0kgaO9WU)

Always select a low-mid resolution to make your images lighter and 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

![](https://lh7-us.googleusercontent.com/vDSBGCqhTx02vDkWTD1hGwn7pjdLGCJ1N1HvxMCLP1gBDM8UIC0YBKXkQlsB-cHpS16bs0Vqb1LCZGC9Ak09XAlPrt7f62QU5efzNsS6M5er2ZATCeuhFLgqIr1TI62pEvYdkEyldo8LrPZ1pBF4LuQ)

\- 1920x1080 Dimensions / 16:9 Aspect Ratio

![](https://lh7-us.googleusercontent.com/-h_kV1ReO1KC4m0-h7ewqUuTHrMwR7CS3FvDSv4W6XrLxuh_nqHeWNg1kbI7j4-_ajAeHufEfIoqqJKM5U_l_dpyyHfOra4FUpLJwJnIRS5AE7VOyL7GQj_0a7j7aRAdXX5upAnDPINLZ5rLE4yw08w)

How both images get displayed in the store:\
![](https://lh7-us.googleusercontent.com/IpYizzDRt-levUdOWX4aEAxPCwEe17y7ejWaLcF-Yx7jChgLdoeh-_VmxdGgS97XqqY0eTqzuOdK6YWZN3yoBbPwFok0ZH8AxicoQwE8KKmozwJd0ROpXZtFwsb2gJuTDdaEPCoVKxXe5r33TJfbnhE)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://broadcast.presidiocreative.com/faq/frequently-asked-questions/how-to-prevent-your-images-from-getting-cropped.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.