A website header refers to the strip that is always present at the top of a webpage. It normally contains a logo, a navigation bar, a search bar, and other details that might be relevant for the user. The definition has slowly changed overtime, and people now call the entire content which is above-the-fold a website header. Because above-the-fold content is the most important for grabbing people’s attention, you need to find content that generates an emotional response.
One of the easiest ways to do that is by using a website header image. Most users prefer visuals over written content because they are more pleasing to the eye and they carry more weight than copywriting or customer ratings alone. If you look around on the Web, most websites launched today have a website header image instead of other types of above-the-fold content. In order to learn how to incorporate header photos in your own website design, keep reading.
Using high-quality photos is the first requirement for your website header image. If you upload low-quality photos, they will look blurry and visitors will leave the site in seconds – nay, milliseconds! A bigger, higher-resolution image is also helpful to fit the space better. A small-sized image that is stretched to fit a specific space within your website will always look distorted and pixeled. Always opt for high-resolution images instead. However, be careful not to go too high-resolution either because HQ images can make a website slow if not optimized properly.
If your website contains branding details, the website header image should also have something in common with your brand. For instance, you can include your company’s logo or respect the color palette adopted on your site. Take your time to choose an image that fits the website’s style just right. Instead of rushing and using the first free stock image you find, take your time to prepare photos that are both beautiful and on-brand.
Some pictures may look great when you see them individually, but they might not be suitable as your website header image. You will have to choose a picture that works with your website's color scheme. Choose a darker image if your website’s theme is light. Conversely, choose light images for darker-toned themes. It's not a hard-and-fast rule, but playing with contrast in this way can help you find that perfect balance.
Simply choosing an image because it looks good won’t work in this situation. Your website header image needs to be related to your website’s niche. If you plan to add a lot of written content on top of the image, choose pictures that are simpler in content to avoid making users struggle with understanding what’s going on. People tend to prefer pictures that include people in their composition, so keep that in mind when browsing for a good one.
It’s best to find a picture that allows you to create a balance between the written content and the visual part. Consider using an image that doesn’t entirely consist of a pattern. The image should have lighter parts where the text should go. If you’d like to use an image that has a heavy subject, use less written content.
A website header image can be placed either vertically or horizontally. Depending on how your website is structured, you can use a portrait photo or a landscape one. See which one would suit your website’s style the best.
Your website header image should look great regardless of the size of the device it is displayed on. If the image doesn’t translate well in a smaller size, you should consider a different one with an appropriate aspect ratio.
Choosing header images should be done carefully to avoid legality issues. Always look for free header images instead of taking them from other sites. If you don’t know the source, the pictures might be under copyright restrictions and they could cause you problems in the long run. Stay safe by using header images from reliable sources with clear license agreements.
Talking about copyright infringement, you should always use stock photo libraries. These libraries come in two forms: paid and free. Depending on your current budget and what your website is about, decide whether you should pay for such services or not. There are plenty of free libraries that contain images from all sorts of fields. A few of the most popular ones include:
You can find both portrait and landscape images that you can use as header ones on Unsplash. This source is a free one, but you can’t use the images for commercial uses. Unsplash is updated quite often, as photographers contribute to the platform. Simply type in the keyword and you’ll be provided with a generous number of copyright-free photos.
Pexels is a great source for finding the best website header image. Their platform steadily grew overtime and it’s now a major platform for free stock images. The photos are indeed licensed, but the license is Creative Commons Zero, which means you can use them without any copyright infringement. Each photo has a few tags, making the platform easy to navigate.
Shopify is a platform for building eCommerce sites. To encourage smaller businesses to improve their sites, Shopify launched Burst, which is a free platform for royalty-free HQ images. The pictures you can find on Burst are taken at Shopify’s own studios, as well as from other sources. Regardless of the keyword you use for a search, it’s impossible not to find at least one image that suits your requirements.
This platform lets users download cool images and use them for both personal and commercial purposes. Gratisography is updated weekly and all the pictures are royalty-free. You can use this platform for unconventional website header images that are more on the artistic side of photography.
Getting your website header image from Visual Hunt is as easy as blinking. You just need to access the website, type in your keywords and download any photo. They are all under the CC0 license, which means you can use them for any purpose you may have.
As you may notice yourself, the number of sources for header images is generous and in continuous expansion. Try not to use only one of the websites listed above. Check out each of the platforms and look for that perfect website header image that will delight your users and make them stay longer on your site.
Free cheat sheets available
Subscribe to download a set of cheat sheets for CSS, JS, and HTML
You'll receive an email with the cheat sheets in an instant.