How to Choose a Great Website Header Image

Almost any website out there uses images to complement their content. Photography is a powerful tool for web designers. It can tell a story and draw attention to motivate your visitors to scroll further. In this article I will show you some examples, inspiration and basic rules how you can use imagery in the header of your website.

Contrast

You probably want to add a headline or a short text to your photo. And the last thing a visitor wants is to guess what they are reading. You have to ensure the text stands out and that it is legible. You will get the best results if you use a white color for the font. In the most cases dark text does not work because the contrast is too low. Dark text only looks great if you have an almost white photo, e.g. a white sky:

If the photo is not mainly white it is easier to use a light font color. To get a high contrast you can either use a black and white photo or a dark photo. Here is one example:

Or you can darken your photo with an overlay to get a higher contrast:

Another way is to add a background to your text.

Composition

Do not hide the main subject of your photo behind a text. This way you can dark out the side with the text to get a higher contrast and you can create a more bright side with the subject to highlight it.

Facial Features

A study has shown that websites with facial features like the website above are perceived more appealing. But be sure to show a relevant photo.

Quality

Use high quality and eye-grabbing pictures. If people see an out of focus photo they will leave your website. Visitors expect to see high resolution and professional looking images that are visually appealing. And do not use cheesy stock photos 😉

The right photos can give your visitor context and help them to understand your product or your vision. A great photo can engage people who are interested in your website to read your article or to use your product.

How do you use images on your website? For inspiring photos check out Pexels popular photos: https://www.pexels.com/popular-photos/

Ingo Joseph

Co-founder of Pexels, web developer and hobby photographer: pexels.com/u/ingo/

Pexels – Free Stock Photos

Find free high-quality stock photos.

Start Browsing Free Photos →