What image sizes do I need to use for the newsroom?

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.

Table of contents:

• Aspect ratio
• Different modules, different dimensions
• Size of images
• Photoshop guidance

Aspect ratio

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. 

Presspage modules are responsive, 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. 

Different modules, different dimensions

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 4:1 ratio, and your headline module thumbnails may use a 3:2 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.

Size of images

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.

For newsroom images, we generally recommend using images that are between 1000 and 2500 pixels wide. After uploading your image to the Asset Manager, Presspage will automatically create differently sized versions of this image:

• 500 px wide
• 800 px wide
• 1920 px wide

Using smaller versions of the main image where appropriate (thumbnails, for example) will keep loading times acceptable.

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.

Photoshop guidance

To ensure a good balance between image quality and image size, you can use the option 'Save for Web' in Photoshop or any other image editor. In other versions this option may also be called 'Save for Web and Devices'. This will make sure that the file size doesn't get too big in terms of MB's.

Finally, make sure that your image is using the correct color profile: you should use sRGB rather than Adobe RGB or ProPhoto RGB. The latter two may result in washed out or slightly desaturated colours when viewed in a web browser.