Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Understanding aspect ratios

An aspect ratio is a proportional relationship between an image's width and height. Essentially, it describes an image's shape.

Aspect ratios are written as a formula of width to height, like this: 3:2.

For example, a square image has an aspect ratio of 1:1, since the height and width are the same. The image could be 500px × 500px, or 1500px × 1500px, and the aspect ratio would still be 1:1.

As another example, a portrait-style image might have a ratio of 2:3. With this aspect ratio, the height is 1.5 times longer than the width. So the image could be 500px × 750px, 1500px × 2250px, etc.

Aspect ratios and Squarespace

Many Style Editor tweaks let you choose aspect ratios for different types of images, such as blog post thumbnails, gallery images, or products.

  • For example, if you choose an aspect ratio of 3:2 for blog post thumbnails, all blog post thumbnails on your Blog Page will be cropped to this shape.
  • Because images scale up or down to fit different browser widths, they don't have exact dimensions (like 750px × 500px), but will always be the same shape.
  • Starting with images that have the same aspect ratio helps you predict how they'll crop.

The exact aspect ratios available in the Style Editor depend on your template. Here's an example of the Blog Page in the Brine template:

brine-blog-example.png

Some templates' Style Editors give you the option to ignore aspect ratios. In these instances, your images will keep their original shapes. For example, in the Skye template's Blog Page, you can choose Image Cropping: None.

skye-blog-example.png

Cropping to an aspect ratio

Aside from using built-in Style Editor options, you may want to manually crop an image to a certain aspect ratio. For example, if you use product images that have same aspect ratio, they'll all crop the same way on your site.

Since images don’t need to have the same dimensions to have the same aspect ratio, it’s better to crop them than to try to match their exact dimensions. For best results, crop the shorter side based on the longer side.

  • For instance, if your image is 1500px × 1200px, and you want an aspect ratio of 3:1, crop the shorter side to make the image 1500px × 500px.
  • Don't scale up the longer side; this can make your image blurry.

Step 1 - Find the dimensions

To figure out how long the shorter side needs to be, use an aspect ratio calculator like this one. Note that this is a third-party application that falls out of the scope of Squarespace support.

  1. Find the dimensions of the image on your computer.
  2. In the aspect ratio calculator, enter the W1 and H1 on the left to identify the current aspect ratio.
  3. Adjust the shorter side until you find the ratio you want.

Step 2 - Crop the image

Once you know the dimensions you want, here are some options to crop your images to the right ratio:

  • Third-party software - Before uploading an image, you can edit it on your computer. See our list of recommendations.
  • Adobe Creative Cloud Image Editor - This option is built into your site. After opening the editor, use the Crop tool to adjust the image. The width and height display in the corner you're dragging. You can also choose preset aspect ratios.

crop-aspect-ratio-adobe.png

Page banners

Page banners don't have preset aspect ratios or dimensions. This is because they stretch and change shape to fit a variety of browsers.

  • It can be helpful to crop the image to a banner shape (wide and short). You can "eyeball" this when cropping, since there aren't exact dimensions to aim for in any template. Uploading images that have the same aspect ratio helps you predict how they'll crop to fit the banner container.
  • Most templates give you the option to adjust the banner's height.
  • For banners with a fixed height, such as in the Montauk or Skye templates, ensuring all your banner images have the same aspect ratio will create a uniform look.

Examples of aspect ratios

Here are some common aspect ratios and what they look like.

1-1.png

2-3.png

3-2.png

4-3.png

16-9.png

Was this article helpful?
7 out of 9 found this helpful