How to choose images for your new website

Choosing images for your new website build can be a tricky business.

It’s one thing to find or create images with the right content in them, it’s quite another to have them in the right layout to suit their position on the website. Let’s look at a few things to keep in mind when choosing images to use on your website.

To start with, we need to understand the basics. I’m going to be talking about portrait and landscape format images, here’s what they mean.

Things to consider:

Shape

Is the space the image is to go a portrait or landscape image? If it’s a portrait, choosing a landscape format may not work. Choosing an image sized differently to what’s required will, at best, not display properly and at worst, push the alignment of the whole site out. Let’s look at some examples.

As you can see here, even if you were to crop the Golden Retriever landscape formatted image to suit the portrait shape, you lose what makes it a great image and it doesn’t look right. The cheerful little Beagle was photographed in portrait format and looks just right in that shape.

Colour

Sometimes the colours in an image can really clash with the colour scheme of the site. This clash can look really great and makes the image pop! But occasionally it just doesn’t work, keep an eye out. To resolve this the image could have the colour cooled down or warmed up with some quick photoshop tweaks.

Clarity/Resolution

Image clarity is a very important aspect of chosing an image. If you have a series of images that you’ve pulled from your Instagram feed or taken on your smartphone, they might not pass muster.
Images uploaded to Instagram are compressed to save on size. This means information is stripped out of the image and you’re left with a lower resolution image. It looks great on your mobile, but if you try to use it for a website to be viewed on all devices it may appear blurred or pixelated and detract from the web presence you want to build. Instagram also crops images into a square, this may not work for your website layout either.

Smartphone cameras can produce remarkable images but even though it looks like a brilliant and clear shot on your smartphone it may not look as good when stretched across your website as a background or banner image. If in doubt, run it by your web developer and see if it’s appropriate.

What shape is required?

Slider Images are a very popular trend on websites today. A slider is a slideshow of images and text, usually at the top of the homepage just below the site navigation. Oftentimes, the images run the full width of the page and vary in height; they may take up the full screen or may only be half the screen.

Here’s a few examples from our portfolio:

The slider image viewed alone looks like the below.  It’s like a stretched landscape shape.

Some images will work really well but others, like this photograph of a ginger cat is composed in such a way that if we resize it proportionally to fill the panorama, we have to crop off either side of the cat’s head and eyes. Instead of looking perfect for the slider, it just seems like we’ve horribly doctored this cute cat pic.

This pic, taken further back and with some background, means we can see a bit of context of where the cat is and although we will still be cropping some of the cat’s body off, it makes sense as a composition after cropping.

You also might want to consider what text might need to be placed over your panoramic slider image and if your text and image suit each other. Think about placement too. The image you choose should not be too busy or it becomes too difficult to read the text.