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 options 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.
- You can change the height of some Image Blocks using the cropping handle. To learn more about cropping your images, visit Troubleshooting cropping issues.
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.
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
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.
- Find the dimensions of the image on your computer.
- In the aspect ratio calculator, enter the W1 and H1 on the left to identify the current aspect ratio.
- Adjust the shorter side until you find the ratio you want.
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:
- Before you upload images to your banners, follow our banner image formatting tips.
- You may want to use our built-in Image Editor to crop the image. For help cropping banners, visit Troubleshooting cropping issues.
- Most templates give you the option to change your banner size, including the 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.
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
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. For Video Blocks, it's not possible to change this.
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.