Understanding aspect ratios

false

Understanding aspect ratios

Last updated April 07, 2026 16:13

Tips for resizing images on your site.

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.

Watch a video

Aspect ratios and Squarespace

Many style options let you choose aspect ratios for different types of images, such as blog post featured images, gallery images, or products.

  • For example, if you choose an aspect ratio of 3:2 for blog post featured images, all blog post featured images 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.
  • You can change the height of some image blocks using the cropping handle. To learn more about cropping your images, visit Troubleshooting cropping issues.

The exact aspect ratio options available depend on your version and template. Here's an example of the blog page in the Brine template:

The left side of the image shows the settings for the blog page using the brine template, which includes the aspect ratio. It's set to 3:2. The images on the right reflect that aspect ratio.

Some style tweaks 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.

The settings for a blog page using the Skye template appear on the left. There's an option to ignore the aspect ratio, and set the cropping option to none. The images on the right are different sizes.

Cropping to an aspect ratio

Aside from using built-in style 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.

Option 1 - Crop to a pre-set shape

Use the built-in image editor to crop images to a specific shape. After opening the editor, use the Crop tool to choose from preset aspect ratios.

Tip: If you'd prefer to do this before uploading the image, some third-party tools have pre-set aspect ratio options.

Option 2 - Custom dimensions

To crop images to a custom aspect ratio not offered by our built-in image editor, use a third-party editor.

Since images don’t need to have the same dimensions to have the same aspect ratio, it’s better to crop them to a specific ratio 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.

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.

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. Keep in mind:

Aspect ratios for product images

It's important to make your product images appealing to potential customers. To help with this, you can set the aspect ratio for your product images on store pages and product details pages. To learn how to style your product images, visit Product images.

If your product images appear cropped, visit Troubleshooting cropping issues.

Aspect ratios for videos

Videos you upload to your site directly usually display in a player that has a 16:9 aspect ratio, but the video won't be cropped to fit, so black bars or blank space may display on the side of videos with other aspect ratios. Videos uploaded to section backgrounds crop and zoom to fill the size of the background.

For embedded videos, the thumbnail image from your video hosting service determines the aspect ratio of your video. If you place video blocks in rows or use grid galleries, the rows may be uneven.

If you use gallery blocks and gallery pages (version 7.0 only) and the videos don't appear correctly, change the site styles:

  • For gallery blocks, enable Crop Images to give the videos a uniform aspect ratio.
  • For gallery pages, set the Aspect Ratio to any setting except Auto.

Aspect ratios as percentages

For Index grid galleries in the Brine template family, the aspect ratio tweak is shown as a percentage that you can adjust with a slider.

  • The slider shows values from 0-160.
  • Setting it to 100 creates square images.
  • Values under 100 are landscape-oriented.
  • Values over 100 are portrait-oriented.

To create an exact aspect ratio, divide the height by the width. For example:

  • 2:3 aspect ratio: 3 ÷ 2 = 1.5, so you'd drag the slider to 150.
  • 3:2 aspect ratio: 2 ÷ 3 = .667, so you'd type in 66.7 next to the slider.

Examples of aspect ratios

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

An image of a house under a blue sky is cropped to showcase an aspect ratio of one to one. There is blue text with the aspect ratio written on the image.An image of a house under a blue sky is cropped to showcase an aspect ratio of two to three. There is blue text with the aspect ratio written on the image.An image of a house under a blue sky is cropped to showcase an aspect ratio of three to two. There is blue text with the aspect ratio written on the image.An image of a house under a blue sky is cropped to showcase an aspect ratio of four to three. There is blue text with the aspect ratio written on the image.An image of a house under a blue sky is cropped to showcase an aspect ratio of sixteen to nine. There is blue text with the aspect ratio written on the image.

Was this article helpful?

Yes No

1142 out of 1996 found this helpful

Yes No

Understanding aspect ratios