Cropping photos for your header image

Cropping images for your website can require a bit of extra time and consideration. It can be a challenge, we know! 

While you might have a great image in mind for a content page, sometimes the image of choice just isn't the most suitable pick based on the header dimensions of your theme and cropping across all devices. Instead, this image might be better placed within the body of text as a breakout feature. 

Roam's responsive sizing:

Roam uses a responsive framework for all images, especially for header images.

Desktops: Naturally, desktop devices have more visual space spanning across the screen and typically Roam use a rectangular shape crop for the middle horizontal third of the original image for the header space.

Mobiles: In contrast, mobile displays are much smaller than a desktop and tend to use a square image crop, cropping from the middle vertical third of the image. 

Below is an example of how one image can vary in look and feel across mobile (top), 1100px width device (middle) and a 2400px width device (bottom). 

So what makes a good header image?

• Images without people and of nature or attractions 
• Images where the main feature or focus is centre aligned both horizontally and vertically
• Images with people all similar height alignment 
• Images taken at a further distance which allows for cropping for the chosen tile size/header space. 

What makes a header image difficult to work with?

• The original photo was taken too close up to the activity, people or attraction. When loaded on a desktop device it becomes focused on the centre horizontal third and on mobile the centre vertical third. 
• The original image is taken with left or right alignment resulting in main feature being cropped on mobile devices that use centre alignment crop. 
• People of various heights or some standing/sitting. You’re then caught having a larger area of space you need to account for on desktop. 
• Full-length photos of people or attractions where the feature runs over the top and bottom thirds.