Aspect Ratios for Images

When it comes to using our interface builder, there are numerous amounts of modules that allow you to insert photos. However, it’s best to know when to use certain image resolutions, ratios, and overall sizes as there are times when an image has text in which could get cut off due to how our modules are created. As well as ensuring that your image quality is high enough to be viewed on multiple devices and not look blurry.

In this article, we help explain which sizes generally work best with our interface modules to ensure you have greater results across your website.

What is an Aspect Ratio?

Aspect ratio refers to a general formula between width and height of a particular media element. Generally this is represented by two numbers separated by a colon and can be thought as (X:Y).

The X defines the unit width of an image, while the Y defines the height of an image.


What type of Aspect Ratios are there?

There are various aspect ratios however, when it comes to website three  very common ratios are 16:9 and 4:3  and 3:4 which we’ll be using as the example across the article.

4:3 Ratio

The 4:3 aspect ratio has been used as a standard format for fullscreen TVs and Monitors screen sizes before high definition was produced. This aspect ratio is also optimum for mobile and tablet screens.

3:4 Ratio

This ratio is similar to a 4:3 however, the 3:4 ratio is typically used for landscape based photos where as 4:3 is used for general portraits.

16:9 Ratio

The 16:9 aspect ratio has been the successor of a standard format and is widely used as the new high-definition standard ratio. This is typically used on all new technologies  such as widescreen monitors, TVs, and various mobile devices.

Aspect Ratios within our builder

When using our web builder tool you’ll need to utilize 16:9, 4:3, and 3:4 ratios. These are important as each has a certain usage across specific modules. To make it easier for utilizing these ratios across your website, we’ve provided a visual reference and cheat sheet table to help match what you’ll need.


Ratio Reference Sheet by Columns (Below)

The reference image above is only showcasing the width of a particular image. You’ll also need to know the height of an image depending on when you’re using landscape vs portrait images. To also help with this, we’ve provided a reference table below.

16:9 4:3 3:4
1 Column = 1080 x 608px 1 Column = 1080 x 810px 1 Column = 810 x 1080px
Column 2/3 = 795 x 447px Column 2/3 = 795 x 597px Column  2/3 = 597 x 795px
Column 1/2 = 700 x 394px Column 1/2 = 526 x 394px Column 1/2 = 526 x 700px
Column 1/3 = 510 x 287px Column 1/3 = 510 x 384px Column 1/3 = 384 x 510px
Column 1/4 = 320 x 181px Column 1/4 = 320 x 241px Column 1/4 = 241 x 320px

Choosing image dimensions for a module

Unfortunately, there is no one-size fits all given that any image you have could be different for a variety of reasons but having a general idea of what works best per module is helpful.



Image Module

For this module, you can consider the 16:9 and 4:3 layouts

Slider or Post Module

For this module, simply match the image width with the width of your selected column. The height will be auto-adjusted.

Blurb Module

For this module, the max width of a single column layout in the Blurb module is 550px. The minimum is typically 250px. You can set your image with these values however, this blurb will auto-adjust the height for a responsive view.