A guide to aspect ratios

We're often asked which size images to use for the newsroom. The answer is to this question is not as easy as it may seem.

After all, users may view your newsroom on a desktop PC, laptop, tablet or smartphone. These devices may all have different screen sizes. A smartphone could be held in landscape or portrait mode. 

Fortunately, with responsive web design, there's code in place that does most of the heavy lifting for you, allowing images to scale regardless of screen size and device. However, there's one thing that you should definitely keep in mind to make sure that your image looks the same on a 24 inch monitor and a 13 inch laptop screen. The technical term is aspect ratio.

An aspect ratio is the proportion of an images width to its height. For example, an image that is 600 pixels wide and 400 pixels tall will have an aspect ratio of 3:2. 

Using images with the same aspect ratio will ensure that your images will be resized consistently and proportionally across different devices. 

Bear in mind that different modules may require images that use different aspect ratios. For example, a news carousel module may use images with a 16:9 ratio, and your headline module thumbnails may use a 5:3 aspect ratio. Being aware of this will go a long way towards having a great looking newsroom.

It's recommended to upload images in the correct aspect ratio, but it's possible to crop images in the Asset Manager as well.

Make sure that your images are large enough: resizing smaller images so they fit on larger screens may cause images to become blurry or stretched out. Also note that text in images is not ideal when you're not using the correct aspect ratio, as it may be cropped out.

If you're still unsure and you would like some image dimension numbers, it's recommended to use images between 1000-2000 px for the Image Module in the newsroom. If you need to supply a logo for your email template(s), use one with a width of at least 600 px - it will be resized to fit.