What aspect ratios do I use for my images on the web?

Don’t know which size to work with for your image or design? Another question we often used to get when we were working as a digital marketing consultant. We've listed common aspect ratios, along with popular image sizes to help you create the next project.

What's Aspect Ratio?

The aspect ratio of a graphic is the proportional relationship of the width to the height. You recognize it as two numbers separated with a colon within an x:y format. For example, a 6 x 4-inch image comes with an aspect ratio of 3:2. The partnership between its width and height determines the ratio and shape, and not the image’s actual size.

However, an image’s aspect ratio changes with respect to the medium where it is presented. The aspect ratio of a graphic displayed on a computer changes from the aspect ratio of the same image displayed on your phone.

Aspect ratios are a crucial part of content because images have to be uploaded at different aspect ratios for different uses, like desktop vs. mobile or blog vs. social media. By using the right aspect ratios it ensures your images are displayed as intended without stretching, cropping or resolution loss.

Let’s review some common aspect ratios that are usually used across different spaces.

Common aspect ratios

1:1 Ratio

A 1:1 ratio means an image’s width and height are equal, setting up a square. Some typically common 1:1 ratios are an 8 x 8-inch photo, a 1080 x 1080 pixel image, or typically any profile picture template on social media. It’s not suitable for most TV or digital formats.

3:2 Ratio

The 3:2 ratio has roots in 35-millimetre film and photography and continues to be trusted for print sizes. Images framed at 1080 x 720 pixels or 6 x 4 inches are set in this aspect ratio.

4:3 Ratio

A 4:3 ratio is normally used for TV displays, computer monitors, and digital camera models. A graphic sized at 1024 x 768 pixels or 8 x 6 inches fits an average 4:3 ratio.

16:9 Ratio

The 16:9 ratio is mainly seen on presentation slides, computer monitors, or widescreen TVs. This international standard recently replaced the 4:3 ratio for monitors and TV screens, developing a slimmer, more elongated rectangular. Common resolutions in the 16:9 ratio are 1920 x 1080 pixels and 1280 x 720 pixels.

Common Image Sizes for Web

If you're uploading images on the net, it’s essential to understand image size specifications because incorrect image sizes may stretch or distort to fill fixed dimensions.

When you’re working with a content management system (CMS), like WordPress, Contentful, Prismic or Squarespace, the image size requirements will change based on the theme or template you’re using. Check your template or theme on whatever CMS you’re using to look for the right image size to upload. Similarly, social media websites will most likely resize images for you, but there’s a sweet spot that will make sure your images display properly at a few different sizes.

These are a few of the typical image sizes for the web: