Skip To Main Content

The importance of good website imagery and how to achieve great pictures on your own site

In our recent blog article What is the key to creating successful web pages? we talked about the importance of good quality, unique content that users are actively seeking out. The article focused mainly on a website’s wording and only briefly touched on imagery. So, in this article we take a more detailed look at the importance of good photography on your website as well as some tips for improving your photo editing skills.

Why is it important to have good imagery on my website?

This is easy to answer. Humans are very visual and tend to look first and ask questions later. Essentially, this means our brains will focus on the imagery before reading the wording on a website. On a more biological level, our brains store images in our long-term memory whereas text is stored in our short-term memory. Images register in our brains much faster than words on a page do. It goes without saying that words are essential to help users learn about your product or services, as well as increasing the chances of your web pages ranking well in search engines. However, as your website has only a few seconds to make the right first impression, it’s the images that users will tend to look at first, thereby being a key factor as to whether they stay on your website or leave.

Good photography can be used in your website for many purposes. It can showcase your work, help to reinforce a point you wish to make, or be used to evoke an emotion in your users. One popular option is to show a photo of your team at your premises. This is a great way to communicate the personal side of your business to your potential customers and helps build trust in your brand / company. Imagery is also important from a usability point of view. A good web page should contain relevant images that aid the user journey by acting as signposts to help users navigate to the page they are interested in quickly and easily.

How do I know if my imagery is good enough?

OK, let’s start by asking a few questions. Do you already have a website? If so, were the images created and uploaded by a professional web design agency as part of the build process? If they were I would expect the images to have been edited and formatted in the correct way so they look their best. Professional web designers should be very experienced at photo editing and use the right tools for the job, like Adobe Photoshop.

If, on the other hand, you or a member of your team were responsible for creating and adding the images to your site – or you’re in the process of planning a new website and it’s down to you to create, format and upload the images – then I would recommend reading the tips below to ensure your images don’t fall foul of these common mistakes.

Portrait and landscape images

Portrait and landscape are terms you’re probably already familiar with. Portrait is used to describe a painting of a person and would generally be vertically tall to include the head, shoulders and upper body in the picture. Landscape images are those which would be horizontally bigger in order to capture a large scenic view. These terms are still widely used in photography and may be rather obvious to many, but it’s important to understand the meaning of them as your web agency may ask you to supply images for your website in the these formats. Below are examples of both styles.

 

A photograph taken in ‘portrait’ orientation

 

A photograph taken in ‘landscape’ orientation

 

Cropping images

Images that are created for your website need to be formatted in the correct way. Cropping can be done using photo editing software that allows you to select a certain area of the image and discard the rest. You may, for example, have a photo of a boat on the ocean that you wish to feature. If the boat is to the left hand side of the image and you have a lot of ocean on the right you may want to crop the image so that the boat becomes the main focus. The key to any good crop is to make sure the main focus of the image is the object you want your audience to look at. Try to avoid cropping key parts of the image out of the picture so that you are left with a lot of empty space. Careful cropping is particularly important on responsive websites as you’ll want to ensure your images look good on all devices such as desktop computers, tablets and smartphones. Once you’ve uploaded a cropped photo to your website, take the time to check how it looks on all devices to ensure the main focal point of the image is not accidentally cropped off.

An example of a poorly cropped photograph

An example of a well cropped photograph

Warped (or squashed) images

Before I hand a website over to a client I supply them with a list of each image size they need to use on the different areas of their website. These sizes are based on the design templates I have created for each page. Warped (or squashed) images can be common on websites where images are not edited professionally. This usually happens when the image is resized incorrectly by not constraining the aspect ratio. When resizing your images it is essential to lock the width and height values so that if you decrease the height of your image the width also decreases at the same time, and vice versa.

An example of a ‘squashed’ image

An example of a correctly constrained image

Low quality images

When advising a client on uploading images, I always ask them to upload sufficiently high resolution files. After all, I’m sure they want their images to look as good as possible on all devices.

Nowadays, users often surf the web on devices with incredibly high resolution displays resulting in far greater clarity. The use of retina-ready (retina is Apple’s term for high resolution screen sizes) imagery has now become part of the web development process. Using low resolution images on your website might be acceptable if all of the users are viewing your website on desktop computers with older displays, but as more and more people surf the web on mobile devices, the resolution of your images becomes an increasingly important factor.

The tricky part is getting the balance right between high quality images and website speed / performance. Higher resolution images will result in larger file sizes and, inevitably, slower load times of your web pages, which can be disastrous. However, as internet connections such as Wi-fi and 4G increase in speed we will see a continued increase in higher resolution images being used on websites.

An example of a low quality image

Use a professional photographer

If you’re keen for your website to look its absolute best, we highly recommend commissioning a professional photographer. Although the initial costs may be high, it’s important to view it as an investment in your overall marketing, as the final images can be used in printed materials such as company brochures as well as the website itself. If done well, you’ll end up with a website that contains unique, professional photography that creates a fantastic first impression to your potential customers. We work with a number of carefully selected photographers on a regular basis and would be happy to recommend their services to you.

The D.I.Y. option

If you don’t have the budget to commission a professional photographer then why not have a go at doing it yourself? If you do, you’ll need the right equipment. A digital SLR camera can be picked up for under £500, possibly even less on eBay. Before taking your photos I would highly recommend reading a beginner’s guide to photography book as this will help you to understand the basics of what makes a good image.

Once you’ve taken your photos, you’ll need to do some post-production such as adjusting colours, cropping, resizing, formatting and saving. For this you’ll require a photo-editing software package. The most popular of these – and the one I recommend – is Adobe Photoshop. A single user license costs around £9 per month and includes their popular Adobe Lightroom software, used by many professional photographers. Affinity Photo is another great package which you can purchase for a one-off fee and comes with lots of great tools. There are plenty of online tutorials and videos that can really help you make the best of your images.

Stock photography

I cannot blog about imagery without mentioning stock photography. For many years stock photography has been the ‘go-to’ place for web (and graphic) designers who are not supplied with good photography from the client. Using stock photography can be a fantastic, cost-effective solution and there are plenty of libraries to choose from. I often purchase stock images on behalf of clients from sites such as iStock and Shutterstock, both of which contain a huge collection of professional photos and vector graphics. Do note, however, that these popular websites are not as cheap as they once were, so be sure to pay particular attention to the price of each image.

Summary

Whether you opt for unique photography (either shot by a professional photographer or yourself) or stock photography, be sure to consider your brand and your target audience. Many large companies will include guidance on the usage of photography within their brand guidelines to ensure that all images used in their marketing materials are ‘on brand’ and convey the right message. You should look to do the same as it’s important to be consistent and not to confuse your potential customers.

Finally, just remember the opening paragraph of this post; users tend to focus on imagery before wording. So, if you’re keen for your website to make a great first impression, then pay particular attention to the images within it as they will play a significant role in achieving this.

let’s work together