Believe it or not, there’s an art to cropping larger images properly and in a way that doesn’t make the image look…well…rubbish. In this post I’m going to talk about the aesthetics of well composed images and the importance of cropping to the strengths of the image.
If you’ve ever looked at a website and thought it looks beautiful, but you couldn’t quite work out why, it might be worth looking at how it uses images. Something I’ve noticed is that a lot of designers tend to slice off a chunk of their images so they look incomplete. But not just any old chunk.
While much of the time the shape and space available to you in a webpage will dictate what size your image should be, it doesn’t necessarily dictate the content or composition. Let’s look at some examples.
The Ginger Monkey Design portfolio uses cropped thumbnails for every item of work. Such is the level of detail in each piece, it only needs to show a small area to entice users to click through.
Jesse Bennet Chamberlain‘s homepage displays some of his recent work using a porthole type effect. Combined with a slight inner shadow it really gives an illusion of depth and layering. This is an example of circular cropping. Not as common as regular square or rectangular cropping, but it’s a very nice effect all the same.
What makes a well composed image attractive?
If you can find the focal point(s) of an image, you can crop it to a dimension that will really impact on the viewer. It can be quite difficult to get the proportions right to begin with, but with practice you’ll begin to pick out these focal points and see exactly what shape and size the image should be before you start work on it.
When cropping your images you want to capture the most interesting part of the image and zoom in on it. But make sure your focal point isn’t directly in the centre, unless the image you’re using is very symmetrical. Also, don’t be afraid to cut off an area of the image that doesn’t add anything. Having an image slightly to one side and cut off hints at more outside the picture tempting the viewer to click through or continue browsing your site. It can really add interest to otherwise boring images.
This is a photo of a little ginger guy I snapped on my iPhone while he was snoozing in the shade in a hotel in Cyprus. He’s cute, but he image itself is not particularly inspiring and it’s a little bit boring.
Taking his face and that upturned paw as the focal points, I’ve zoomed in on the image and moved his head (the primary focal point) off centre and to one side. You can see more detail in his face and although we’ve chopped off a large section of his slumped body, you still get a sense of all that laziness. This is miles better.
The Banneton website uses close-up shots of the bread they make. Rather than showing whole loaves, they simply zoom in. From a user perspective, it shows the company has a genuine confidence in what they offer and it is therefore presented front and centre. If you look closely, every one of the slider images on the homepage is cropped and focused. None of them include a complete loaf of bread, cup or bowl.
Apple are known for producing beautiful, aesthetically pleasing products. But their presentation through the Apple website is also consistently appealing. They use plenty of zoomed in and close-up shots to give viewers a real sense of quality and luxury. Take a minute to click through the site and look at how many places incomplete images are used or cropping is used to focus the eye on a particular detail of a product.
What you might also notice is that images are rarely cropped at a 50-50 scale. As in, they are rarely cut directly in half or only show exactly half of the product/subject. The idea of the rule of thirds is regularly applied – something I intend to write a separate post on, as it is beyond the scope of this one.
Using ‘incomplete’ images to break the grid
Grid-based layouts are very popular across the web design industry. They provide a starting point at the beginning of a project and a reference point throughout. While many consider it to be a standard practice, not everyone wants their website to look ‘rigid’ or ‘boring’ as can happen if careful thought is not applied. One way designers get round this potential boxy appearance is by using large images that sprawl across the background of the page, seemingly transcending the grid. Normally they are quite subtle so as not to distract from the main content, but they are also sometimes used for impact.
Another method that I’ve seen used is to rotate an image so it’s at an angle. This helps to break the grid visually without actually affecting the layout. A sort of ordered chaos.
The point of this post is not to argue that every image should be chopped up and presented in the same way. It’s more to point out that you don’t have to use an image in its entirety. If it’s too long or too wide for a particular space on your site, don’t be afraid to open it up in an image editor and play around with cropping it to different dimensions. You might be surprised at what you can find. Sometimes the perfect detail or the perfect focal point is sitting right in front of you. You just need to find it.
Keep an eye out while you browse the web today. I guarantee you’ll see examples of this everywhere.