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.
|
Module |
Usage |
|
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. |