The Power in Cropping
To best communicate through visuals, you must consider the impact, story and message. One way of finding a story within a story is through the image crop.
Image cropping works hand in hand with composition, excluding unwanted or distracting elements and getting straight to the message. When choosing images for your website and brand, the same image may be used with multiple cropped formats across your marketing, so understanding the core message is vital.
The Original
Whether commissioning a photographer, using stock imagery or creating in AI, you’ll first need to consider the art direction problem. The art direction problem encompasses the requirement of multiple crops of the same image for viewing websites on different devices, for example, a landscape banner on a desktop or a vertical crop on a mobile. The photo above shows the original stock image of a mountaineer in Patagonia. As you can see, it has been photographed with space, providing options for cropping and room for headlines and copy text.
Desktop Landscape Hero Image
By eliminating the right-hand side and a portion of the sky, your eye is drawn to the mountaineer in the image. By placing on the dominant third and walking to the left, space has been left for his destination. There is also a repetition of tone (trousers and sand, rucksack and sky). This is an impactful crop, cutting through to the core story but allowing room for copy if needed.
Desktop Landscape Hero Banner
Landscape banner crops are often the hardest to consider when choosing a hero image. As mentioned, it’s the perfect image choice because the photographer took this image wider without a final, tighter crop. As with crop 1, the impact is key. The image has been more aggressively cropped from the top, bottom and right-hand side. Positioning the mountaineer on the dominant third, with negative space to the left, works either with or without copy.
The Thumbnail
On websites, you often require a square-cropped thumbnail. Because the image appears smaller, you need to crop tighter and get straight to the message. There is no need for copy space, but still, place the mountaineer on the right-hand side to give him room to walk.
Inset and Instagram Square
For a square paragraph inset or for sharing on social media, an impactful square needs to communicate with a correct crop. As with crop 1, the mountaineer is placed in the dominant bottom right. The tonal repetition and space for the mountaineer (and your eye) to walk through the scene communicates a compelling story.
Mobile Portrait Hero Image
The final crop to consider is how a hero image will appear on mobile devices. For maximum impact, this is portrait (and may even have a taller ratio) and will need to communicate the story whilst leaving room for headlines and copy. As with crop 4, you guessed it, the mountaineer is placed on the right-hand side, leaving space to the left to tell the story of where he is walking and room above for text.
One last point to mention is about pixels. Make sure the original photograph is large enough to crop without losing resolution.
Article by Karen
Related posts
The Art of Web Design Composition
As someone who has come into digital design from a fine art, photography, and print background, I
Impactful Portraits
When photographing people, there are conventional rules for framing and cropping. Contemporary fashi
Summer 23 Magazine: Artificial Intelligence and the Open Road
We take great pride in the dedication and expertise of our team, and we are excited to share our kno