With so many wonderful photographers out there today, as well as high-tech phones that can take amazing photos, websites have no excuse for poor quality images!

But taking photos for use on a website is a little bit different than taking photos for other applications. At Impressence, we are often supplied with photos that look good, but are difficult to work with in a website environment.

So whether you’re a budding stock image photographer, taking photos for a client for use on a website, or taking photos yourself for your website, we’ve put together some tips to help ensure your photos are usable. 

This article doesn’t cover general photographic techniques, and we assume that you are already capable of taking good photos 😊

Things to think about when taking photos for websites

Take photos at a high resolution

The world is full of high resolution, large screens, so the photos you take need to be large enough to fit them without becoming pixelated. Websites that contain images that aren’t crisp and clear present a poor impression and make them look cheap and amateurish.

Additionally, taking photos at a high resolution also allows flexibility for cropping. Sometimes a smaller part of the image is required. If the resolution isn’t high enough, the cropped section may result in an image that is too small to use. 

Low Resolution Image Sample
High Resolution Image Sample
What’s a good resolution? As big as you can get! A width of at least 2048px is your best bet. But double that is even better as it gives you more flexibility.

Take photos in widescreen format

On desktops and tablets, websites are viewed in a wide format. Photos taken in widescreen can be used in headers and backgrounds which typically take up the entire width of the screen. 

You can use images taken in a typical 4:3 format for headers as well, provided they are at a high enough resolution and you can crop the top and/or bottom.

Widescreen header image format sample

Allow room for cropping

Always leave room around the focal part of the photo as a margin. When building websites, we often need to crop an image to fit a certain dimension. If there’s no space around the subject this can make the image unusable.

We see this most often with photos taken of people right at the edge of the photo. If we need to crop the photo to a certain size/dimension, the person gets cut off.

See in the image below. It was taken in a widescreen 16:9 format. If we needed to use this image (and needed to show every person), and use it in a 4:3 format, we can’t fit everyone in.

Photo cropping sample

Leave space for copy

Another thing to keep in mind is that images on websites (or images being used for social media) will commonly be used as a background for text. Ensure there is negative space incorporated in the photo that can be used as a text area without compromising the subject of the photo.

Copy Space Sample Image
Copy Space Sample Image - With Copy

When leaving space for copy, continue to keep wide formats in mind.

Headshots need cropping and copy space too

Getting headshot photos? The above rules for leaving space for cropping and copy still apply. This is one of the most frustrating things we come across in regards to professional headshot photos. The photos are great but give us web developers no room to work with. And they are often taken in portrait mode too, making it even more difficult to crop and work with. So make sure your photographer knows to leave space around your headshot,  particularly if you want your photo to be a hero image on a page. And have them take both portrait and landscape formats to be on the safe side.

Take photos that tell a story

This comes particularly into play if you are taking photos for a specific website/business. If your business serves coffee shops, take photos that include people in coffee shops – or people serving in coffee shops. If your business serves wheat farmers, show photos of your product/services in farm settings.

Don’t use your phone to send photos!

Most smart phones today have great lenses and take images at high enough resolutions. So taking photos on your phone is fine if you know how to take them well.

But don’t send your photos from your phone via messaging apps – whether SMS, Facebook Messenger, or even your email. This is because in most cases, the apps will shrink your photos so that the file size isn’t big.

You can still use your phone to upload photos to sources like Dropbox, or OneDrive.

A word about using stock photos

Stock photos are an essential toolkit for websites. In many cases buying professional stock images is a good option, and it may be the best bet for many images on a website. But when you need to add personal touches, include photos of the business & staff, or add your products, you’ll need to have a photography session. We always recommend that you engage the services of a professional photographer to get quality images that won’t let your business down.

Summary

Naturally, you need to be able to take good photos and with good subjects. It also helps if you know what photo you are taking for what part of the website. For example, if you know what image you need for a website header, you’ll make sure to take it in widescreen. But if you keep the above principles in mind, it will help you in general to take photos that are going to work on your website.