What’s the aspect ratio of an image and why should you care?
The aspect ratio of an image expresses its height relative to its width. Understanding aspect ratios helps you choose and place images that look attractive, consistent, and well-matched on your website.
Images are either tall, wide, or square
A rectangular image can have one of three shapes:
Tall (also known as a Portrait shape)
Wide (also known as a Landscape shape)
Square
Images are either tall, wide, or square and they each have their own aspect ratio
The dimensions of an image can be measured in pixels, inches, centimeters, and other units
Images that you create, download from stock photo sites, or take yourself on your phone are pre-set with a shape and size. The exact dimensions of an image can be measured in units such as inches or centimeters or in pixels, which is the measuring unit generally used in image editing programs.
Portrait-style images are taller than they are wide. This is the shape of a photo you take on your phone in the upright position. The dimensions of a tall portrait photo on my phone are 3024 pixels wide x 4032 pixels high. Other phones might produce photos of different dimensions.
Landscape-style images are wider than they are tall. When you take a photo with your phone turned sideways, you’re taking a wide landscape photo. The dimensions of a portrait photo on my phone are 4032 pixels wide x 3024 pixels high. Other phones might produce photos of different dimensions.
Square images are photos that have been cropped with an image editing program to be equally wide and tall. Square images can also be designed from scratch in drawing programs like Adobe Photoshop and Canva or downloaded from stock photo sites.
The aspect ratio is a generic expression of width to height
The aspect ratio of an image is a shorthand way to express image width relative to its height. It is expressed as two numbers, separated by a colon. The width is the first number and the height is the second number.
The aspect ratio is unrelated to the actual dimensions of an image. Images with the same aspect ratio can have very different dimensions.
Below are some example aspect ratios. For the best quality and loading speed, Squarespace recommends using images between 1,500 and 2,500 pixels on the largest side. I usually try for about 1,900 pixels. And you shouldn’t go below 1,000 pixels for any image on a Squarespace website because it won’t look good and won’t resize well on different devices.
Portrait aspect ratio examples
2:3
2 units wide by 3 units tall
1000 w x 1500 h (pixels)
1280 w x 1920 h (pixels)
18 w x 27 h (inches)
3:4
3 units wide by 4 units tall
3024 w x 4032 h (pixels)
1500 w x 2000 h (pixels)
9 w x 12 h (inches)
Landscape aspect ratio examples
4:3
4 units wide by 3 units tall
4032 w x 3024 h (pixels)
1920 w x 1440 h (pixels)
20 w x 15 h (inches)
16:9
16 units wide by 9 units tall
1920 w x 1080 h (pixels)
2560 w x 1440 h (pixels)
11 w x 6 h (inches)
Square aspect ratio examples
1:1
1 unit wide by 1 unit tall
1920 w x 1920 h (pixels)
1440 w x 1440 h (pixels)
25 w x 25 h (inches)
Aspect ratio choices on your website
When you want to display multiple images in a collection on a website page, certain Squarespace design elements let you choose a consistent aspect ratio for all the images in the collection.
Examples of image collections
In Squarespace, many kinds of pages use image collections: Blog pages, Team pages, Event pages, Product pages, and Portfolio pages. Any kind of page can also use a summary block to show featured images and brief text that concisely show a group of pages, blog posts, or other groups of related content.
It’s prudent to prepare images in the correct size and aspect ratio before you upload them for these collections. Or you can crop them to the correct aspect ratio using the image editing tool in your website builder if it’s available. If you plan to crop the image in your website builder, you should make sure the original image aspect ratio is a little larger, but not too much larger, than the aspect ratio that the image will be cropped to. That ensures that when it’s cropped to size in the collection, the main subject of the image still looks good.
If you use a different website builder that doesn’t have this wide a variety of image collections, you can still place images next to each other in columns and add text. For such a scenario, you’ll want to prepare your images in advance before uploading them. When they’re used together for a collection or gallery, they should have the same aspect ratio so they are consistently sized on your website.
Landscape and square aspect ratios are the most commonly used in collections
In Squarespace, depending on the type of page or design element you’re working with, you may have a choice about the style for the image collection. Usually, you’ll have a choice of a slideshow, carousel, list, or grid table. With these choices, you’re also asked to choose the aspect ratio for the whole collection.
Any images you choose for these collections will be cropped to have the same aspect ratio so they look neat and consistent. Most designers choose a landscape or square aspect ratio, but there may be times when a collection of portrait images suits the website content.
Websites look better with consistent aspect ratios
One of the easiest ways to make your website look neat and well-designed is to be deliberate and consistent about the shapes and aspect ratios for its images. It’s ok to use a variety of tall, wide, and square photos, but be consistent about how you use them. For a collection of similar items, you should choose the aspect ratio in advance and prepare the photos to look good in that aspect ratio or plan to crop them in your website builder’s image editing program.
Handy tool for determining the aspect ratio
To check the aspect ratio of one of your images whose dimensions you know, you can enter the width and height in this calculator and see what the aspect ratio is.
Tools for cropping and resizing images
Here are some tools you can use for preparing images in advance:
Online image editing: Canva, Pixlr
Desktop image editing: Microsoft Paint, Microsoft Photos, Apple Preview
Phone image editing: Google Photos app for Android phones, Apple Photos app
Now that you know how to prepare your website images with aspect ratios in mind, you can choose and place your images with more care.
Aspect ratios in social media
You may also find aspect ratios helpful for preparing your social media images. Louise Myers compiles and updates all the correct sizes of social media images each year. I find it very helpful!
2023 Social Media Image Sizes by Louise Myers
Other articles you may find useful
Understanding aspect ratios (Squarespace)
A Guide to Common Aspect Ratios, Image Sizes, and Photograph Sizes
