Understanding aspect ratios

Tips for resizing images on your site.

Last updated December 20, 2024

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:

brine-blog-example.png

brine-blog-example.png

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.

skye-blog-example.png

skye-blog-example.png

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

For videos you upload to your site directly, the aspect ratio of the video will match the aspect ratio of the file you uploaded. Most uploaded videos display in a player that has a 16:9 aspect ratio, 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.

1-1.png
2-3.png
3-2.png
4-3.png
16-9.png
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.