: How do I choose a good cover photo for my website? It's been trendy to have large background images with relatively little text over them for headers and intros to web pages including the

@Radia289

Do you really need to follow the trend?

Don't ever do something because it's a trend. Do things because they're good for the user's experience because that is what's best for your company and your design. Think really hard about the implications that adding a large image to your site will have and weigh the other options you have. You don't have to use this technique to have a "modern" website.

With that being said, there are a lot of things to keep in mind when choosing a background image for your website. Since this answer is so long, here's the list in short; I give more detail about each including examples beneath.


Make sure the image is related to the content
Make sure the image says what you want
Make sure the image is relatively unique
Use an image of real things
Make sure the image works with your layout
Make sure the image follows good photography and design rules
Make sure the image follows your color scheme
Limit the variance within the image
Make sure the image size is large enough
Make sure that you have rights to use the image
Make sure the photo quality is high




Make sure the image is related to the content

An unrelated photo will do nothing but harm. Just like anything in your design, if it doesn't directly fit with the purpose of your website then get rid of it. Make sure that it's directly related to the content around it, not something later on. The image needs to have additional context brought by some text or layout in order to help users understand that it's a site and not just a static image.





Make sure the image says what you want

All images have a connotation based on the content of the image and how it's styled. Make sure the image fits the feeling you hope to convey as well as the brand. The image should convey additional understanding past what the text around it provides. Also make sure it helps build your brand in the way you want it to be built.



It goes without saying that the image should be visually attractive. More details on traits for the image to be attractive are below.



Make sure the image is relatively unique

Custom images are better than stock ones, provided the quality is at least the same. That means that you should avoid very well known stock images so long as the alternative is just as high quality and appropriate. However, being absolutely unique is not as important as having a great, appropriate image.





Use an image of real things

There's something about a real image (even a highly edited version) that has a great influence on us as humans. We like to see real things. Whenever possible, opt for a real image over something computer generated unless it wholly doesn't fit the content or style you're going for.



Showing people has an even greater effect, which can be both good and bad. If done correctly, it can make users feel that the experience is more real and personal. If done poorly, it can make it seem impersonal and cheap. More on that here.

Faces in particular draw attention, so make sure they're an appropriate face and put them only where it really matters. At times putting them within another contexts such as a book, and iPad, computer, etc. can help. Other times it's more appropriate to crop out the faces (think of a clothing website or a mannequin). Showing a brand/spokesperson's face is very effective if done right, I highly recommend it if you can.





Make sure the image works with your layout

Your user flow and site layout are more important than any image you may choose. Create them first. If that best layout and flow has a bit of open space at the top, then consider adding an image.

Make sure no important parts of the image are covered by the content that you have. Use visual guidelines to help lead users to the content that you want them to see (more on this in the next section).





Make sure the image follows good photography and design rules

The images should follow core photography rules including the rule of thirds, making use of visual lines, focusing on the main content well, framing the subject correctly, having a good background, and having symmetry and patterns among other things. For more on that check out here or search for more resources online.

These principles will give the image more purpose by helping draw attention to the important parts of the image and its surrounding context.





Make sure the image follows your color scheme

All websites should have a unified feel, including a color scheme. Whether or not you choose the color scheme first and then choose then image or choose the image and then the color scheme (tools like this can help with the latter), make sure that the image colors fit you overall color scheme. Sometimes washing out an image and then applying a color filter may work well.





Limit the variance within the image

Don't make the visual appearance busy. Having a bunch of colors and objects in the image makes it hard to put text over it and fit it with the layout. As said before, create the content first and then pick the image.

Adding partially transparent overlays, darkening an image, or washing it out to black and white before adding a color filter can help reduce unnecessary noise. Also, background colors can be applied behind text or on an element to help with readability as well.



The above image darkens the original image and uses some shadows on the edges to reduce noise. The below image seems to use a partially transparent dark overlay to do the same thing.





Make sure the image size is large enough

It goes without saying that the image used should be big enough to cover each screen without stretching. That means for full size screens we need to have images with a minimum resolution of 1024 x 768 pixels, but it's best to aim for at least 1200 pixels wide. We can also save loading large images for smaller screens by serving difference sizes of images based on the resolution, more on that here. Try to optimize the image load time however possible while not conceding image quality.



Make sure that you have rights to use the image

If you're not allowed to use it, don't use it. If you don't know what the copyright for the image is, look for it, but don't use it until you know! The last thing you want to do is be sued for infringement.



Make sure the photo quality is high

Don't use grainy or blurry images. Don't use a photo with questionable or unrelated content. Keep it simple but (mostly) real. Think hard about the good and bad parts of each image you consider and don't accept something that is mediocre.


Additional resources:


How to Choose Effective Website Photos and Images
Best Fullscreen Websites

Vote Up Vote Down