How to find, edit and use header images

Ross Hall

December 20, 2021
(Updated on December 15, 2021)

Graphic showing the same image on a representation of a tablet in portrait and landscape orientation

Every day, images scream for our attention from newsstands and magazine racks. The right image can lift sales by double digit percentages. It can attract new readers and prompt existing subscribers to renew.

We have a similar challenge in the digital world. Our newsstand is the timeline, and our cover has the same size and fonts as our competitors. It makes our images even more important.

In this guide, I’ll consider the different design options available, suggest some pros and cons of each, and offer guidance on how to find and select appropriate header images for your content.

Contents

What is a header image?

Designing your page templates

Selecting a header image

Editing an image for your site

Exporting the finished image

Adding the image to your post

Promotional Images

Bottom line

What is a header image?

When you open a blog post or article on a website, the header image is the first you’ll see. It usually sits “above the fold”, that is you can see some or all of it as soon as the page opens. Typically, it’ll relate to the content such as a smiling portrait of an interview subject, or a close-up of a meal prepared from the recipe that follows.

You’re also likely to find a header image in the list of blog posts on an index page, or on a card announcing the article on social media.

Given the prevalence of header images and their role in attracting attention, it’s a good idea to invest time in finding and editing the right image.

Designing your page templates

Before looking at images for individual items of content, we’ll start with the page design. A typical website is designed with templates, each tailored to a specific type of content or purpose. For example, you may have templates for products, blog posts, press releases, and so on. Each of these may need header images, although the type, style and placement could change depending on what’s being said.

How much work do you want to do on one page?

Perhaps the first question to ask is how much time and effort you want to put into each piece of content. For a simple blog, it might be enough to have a single page template with a clear and consistent header image throughout. Ecommerce sites could have a blog template, templates for clothing, accessories and a host of other designs based on what’s being sold or promoted.

My suggestion is always to start simple and expand later.

What orientation do you want for your header image?

Orientation is whether the image has the longest side at the top (landscape), down its side (portrait) or equal sides (square).

Landscape works well on both desktop and mobile devices, and is the most common orientation for header images. It’s easier to present the image in its entirety and maintain a flow with the column of text that follows.

Portrait is more difficult to work with. It can look off balance on a desktop, or dominate a mobile screen.

Square header images are rare as they’re more difficult to work with on a web page. 

I have experimented with a responsive layout where the image orientation is matched to the user’s device. However, the extra work didn’t justify the returns, as it had no noticeable impact.

On this site, I use a hybrid approach. Blog posts and guides always use a landscape image. Photography and artwork pages can use portrait if that’s the orientation of the image.

Where will you place the image relative to the title?

Think of what the user sees when they first open your web page as the start of a conversation. The title and header image set out what they can expect as they scroll down. The question is whether you want to open with an image or the title.

Most common is for the title to appear above the image. This reinforces the flow of content and its hierarchy. It’s also the simplest to design if you want to be guaranteed the title is always visible.

Putting the image above the title works well where it is the main focus of the content. For example, for my photography pages, the title follows the image as the user is more likely to have a greater interest in the picture. However, it can disrupt the flow of the page and any delays in loading the file are more obvious as the eye won’t be distracted by scanning the title.

A third approach is to put the title over the image. For SEO and accessibility reasons, this should be separate text rather than included on the image. It usually requires more work than the other two approaches and isn’t always suited to template page designs.

Graphic showing the placement of the title relative to the header image
Three common ways the header image and page title are placed together.

Whether the author, published date, breadcrumbs and other “metadata” appears above or below the image is a design choice, although they should always be after the title text.

Where will you place the image relative to the content?

There are three basic styles for where the image sits relative to the rest of the content.

The first allows the image to span the entire visible page. Usually, the height is constrained to leave space for text above the fold, although it can fill the entire “above the fold” screen. In this latter use, the title sits over the image.

The second spans the column that makes up the main content. This approach cements the header image into the flow of content, although it can look awkward and off-balance.

Finally, the header image can span the entire content, including any sidebars or breakouts.

Graphic showing how websites place the header image relative to different pieces of content
Examples of different header image placements

What dimensions and aspect ratio will you use?

The maximum dimensions of your header images are decided by the orientation, placement and the aspect ratio.

The aspect ratio is the relationship between the longest and shortest sides. For example, an image with a ratio of 4:3 has a top edge that’s 4 units long, and a side edge 3 units high.

Choosing a standard aspect ratio across your site will give a consistent design and make the editing process easier. Typical ones are:

1:1a square image. Commonly used as a thumbnail.
2:1the approximate ratio for a “card” shared on social media (this is discussed below)
3:2used by DSLR cameras
4:3common ratio for smartphone and digital cameras. It’s also the aspect ratio of the iPad
16:9used by some smartphone cameras, 4K cameras and video

A combination of the maximum width the image could be in your design, and the aspect ratio, will give you the largest dimensions for the header image. As an example, if you choose a landscape image across a 1,200 pixel (px) wide column and a 3:2 aspect ratio, your images will need to be 1,200 by 800 pixels.

Graphic showing 3 common aspect ratios
The aspect ratio alters how much of a scene is visible

The aspect ratio of your camera doesn’t have to determine the one you use for your images. Choose a ratio that looks good in your design and edit your images to fit.

Will you support retina and high resolution displays?

Some manufacturers use displays with a higher pixel density. The best known of these is Apple’s Retina display used in iPhones, iPads and MacBooks. These displays pack more pixels into the same space as their counterparts, which makes images seem sharper and more vibrant.

To take advantage of the better resolutions, you need larger images. Typically, they need to be twice as large on each side. For example, your 1,200 by 800 image should be 2,400 by 1,600 pixels.

Why does this matter?

All these decisions add up to a technical specification for your header image. This makes it far easier to find and edit images for individual pages. 

Selecting a header image

Choosing the header image for a specific piece of content can seem as much like art as science. Aesthetics play a large part, but there are some basic principles you can follow while you find your feet.

What is the image trying to portray?

Images should engage the reader and relate to the themes of the content. In broad terms there are four ways the header image could do this.

Reportage

The image features the topic or subject of the content. For example, an interview’s header image is a photograph of the interviewee.

Representative

The image is directly related to the topic or subject, but not of them. For example, an article about international shipping uses a stock photograph of a merchant vessel being unloaded.

Metaphor or simile

The image implies a resemblance to the content in a way that reinforces its message. For example, using a photograph of a young tree to symbolise economic or personal growth.

Abstract

The image extracts some element from or the essence of the content. For example, using a photograph of a lightning strike on a blog post about Battery Electric Vehicles.

Clickbait (the unwanted fifth option)

Clickbait has no relationship to the content, and is chosen purely for its visual appeal. An example is using a photograph of an attractive woman in a yoga pose for an article on men’s health. Alternatively, a celebrity or figure currently in the news can be used, with the title and promotional copy written to match. Although short-term traffic might be gained, abandon rates tend to be higher.

Screenshot of a LinkedIn article with a woman doing the plank and showing how many other posts used the same image
A clickbait image. The article is about men’s fitness, which the image has little to do with. It has also been used tens of thousands of times before, diluting its impact.

Do you use a photo or illustration?

Whether to use a photograph or an illustration depends on the context, although there’s rarely a right or wrong approach. For example, an illustration of an interview subject can be as eye-catching as their photograph.

If the content is part of a series of related features, consider commissioning images from the same source. This will give you a consistent style that binds them together.

Is there a focus in the image?

A clear focus within the image will draw the reader in. Crowd scenes, or indistinct collections of objects are less likely to attract attention. If you’re determined to use an image without this clarity, place it elsewhere in the content, or edit it to create a focal point.

Should you use people and animals?

Header images with people are generally more effective at drawing readers into content. “Cute” animals can also work well. However, use images that are relevant to the content.

If you are using an image with a person as the main focus or subject, you may need a model release.

Where can you find images?

I’ve written a comprehensive guide to sourcing and using stock images. Some key points to consider:

Keep scouting for images as part of your normal internet browsing. If you come across photographers and illustrators whose work catches your eye, bookmark or follow them for later. It’s better to have a broad awareness of what’s available than search libraries only when you need an image.

Editing an image for your site

Once you have an image, it has to be prepared for your site. Photo editing apps on phones and tablets have become more capable over the years, although I prefer to use Affinity Photo on my Apple MacBook and Fujitsu Lifebook. 

Keep records

Before you edit an image, document where you found it, who took it and any licence conditions. Also keep a copy of the original image file. If I’m using an image from a library, I’ll often keep a screenshot of the page where I got it from, and a copy of the site’s terms and conditions.

If there’s a later query, you’re in a sound position to prove you used the image in good faith.

Should you crop the image?

Cropping can change the focal point or orientation of an image. You may choose to do it for any of the following reasons:

When you crop, make sure the resulting image isn’t smaller than your specification. An image that’s too small will look grainy and out of focus when it’s expanded to fit your header design.

Graphic showing different cropping effects on an image
Cropping can change the focus and composition of an image.

Should you adjust the image?

Adjusting the brightness, contrast, saturation or a host of other settings can produce a more interesting image. While you can do this on your phone or tablet, I recommend using a non-destructive editing tool like Affinity Photo. Non-destructive means each change happens in a separate layer rather than applying to the whole of the image. It’s far easier to correct mistakes, or play with adjustment settings.

Another style of adjustment is the “filter”. These are preset adjustments to colours, balance and so on applied to images. While they’re great for sharing photos on social media, I prefer to avoid the default ones for blog content as they can look predictable.

As an alternative, I have my own pre-defined “filters” set up in Affinity Photo, which I apply and tweak to give this site a more consistent feel.

Graphic showing the same image with 4 different filters applied
The original image used in this guide with different filters from my default set applied.

Do you need to scale the image?

Once your image is tuned the way you want it, you may need to resize it to match the standard set out for your page. I will always save a copy of the edited, full-sized file before I take this step in case I need to come back to the image later.

Resizing reduces the image’s dimensions to fit your standard. For example, my FujiFilm camera takes images 6,000 pixels on the longest side. My site’s standard is 2,500 x 1667 pixels. Images have to be scaled down to fit.

When I resize an image, there is a slight effect on quality as four pixels in the original image are being squeezed into the space of one. Software will correct for this, although it may be necessary to sharpen the image slightly.

A word of caution on resizing. Increasing the size of an image will always worsen the quality. If the image you’ve chosen is too small, either pick another one, accept it will look grainy, or put a border around it.

Should you add a watermark?

A watermark is an overlay to show where the image comes from. With so many images available, and them being endlessly downloaded and shared, it’s a useful addition to acknowledge you as the source.

My images use a watermark, either as a stamp on the image or as text within an illustration.

Exporting the finished image

Once you’ve edited your image, it’s time to get it ready to upload. That means exporting it from your editing software.

What file format should you use?

Your cropped, adjusted and resized image has to be saved in a format accessible on the web. There are different file types available, although JPEG is the most widely used and most accessible. WebP is another format you may come across, particularly as WordPress “supports” it.

FormatProCon
JPEGSupported by every browser.
Suited to photographs and complex images.
Text can look blurry.
Quality drops sharply as file size shrinks.
PNGClear, sharp text.
Transparent backgrounds.
Suited to charts and text heavy images.
File sizes are generally larger than JPEG versions.
WebPCompression and quality better than original JPEG.
Supports transparent backgrounds and animations.
Suited to both photography and illustration.
Not supported by older browsers and Macs.
Already out of date.
High-level comparison of the three major image formats supported by most web browsers

I use JPEG. It’s supported by every browser and editing software. It’s also likely to be the format your camera saves or exports to.

What quality should you use?

So your image doesn’t take forever to download, you’ll need a small file size. You get this by reducing the quality of the exported image.

With JPEG format images, you can usually reduce the quality to 60-70% without significantly harming how the image appears. Photography and product sites can go as high as 80-85%.

If you’re using WordPress, you may find your image comes out worse than you expected. It applies its own compression, and while the image you upload won’t be changed, sizes it generates for your template and its responsive features can suffer.

As a guide, WordPress compresses to 82% quality. If you uploaded an image at 70% quality, the user could see something with an equivalent quality of 57%. At that level most people will notice there’s something “off”.

What should you call your file?

The image that comes off your camera is likely to have a meaningless filename such as DSCF7382.JPG, or IMG0082.JPEG.

It’s better to change the filename to something meaningful. This will give you an SEO boost, and help with finding image files later if you ever need to dig around the file system.

What about metadata?

Images often include “metadata”. These are bits of information about the camera used and its settings. They can be helpful to other photographers, although there are security concerns. Sometimes the GPS coordinates are stored of where the image was shot. If you’re shooting at home, you can inadvertently tell everyone where you live.

For this reason, I export images without their metadata.

Screenshot of an image showing information about the camera used and location
Metadata recorded in the image used throughout this guide, including where it was taken.

Adding the image to your post

With the image edited and exported, it’s time to upload, proof and post it.

Uploading your file

Regardless of the content management system, I’ll always upload the image directly to the post. This creates a link in the image library between the two, and makes it easier to see where an image was first used for later audits.

Should you add extra information about your image?

Most content management systems record extra information that describes an image when it is placed on a web page. Although you may not see this “on the page”, it’s both good practice to record it, and has accessibility and SEO benefits.

alt textDescribes the image, and is used by both SEO and accessibility software. Visually impaired users will usually “hear” the image described from the alt text.
image titleTitles the image, and is also used by SEO and accessibility software. This will default to the filename in WordPress.
captionText that’s visible on the web page describing your image. Although it may not be visible on your web site, it is good practice to add one in case the image is used on another page in the content.
descriptionMore detailed information about the image such as where it was taken or sourced. Some WordPress themes will display this.
source, licence etcRecording this information in the media library keeps it in one place in case of future query. You can use the description field. I use a plugin to keep it as separate data.

Always preview before it goes live?

Before a post is published, preview it across devices. Chromium based browsers such as Chrome, Brave and Edge can simulate these for you.

The preview gives you a last opportunity to check the image works with the content. Reasons I’ve rejected images at this late stage include:

The vast majority of the time the preview is fine. If there is an issue, fixing it is a fairly quick task to reedit the image file.

Once everything’s tested, you can go live.

Promotional Images

Having invested in finding and editing a strong header image, it makes sense to use it to promote your content. This could mean creating new versions for specific purposes.

Should you create separate images?

There are many places where you can promote your content, and they all have their own quirks and demands for images. It’s easy to get drawn down a rabbit hole of creating different edits for all the social networks you share on.

For most content, the header image alone should be enough if you’ve designed it correctly. However, create a separate image if:

How do I create social media “cards”?

You may have come across “cards” on Twitter, Facebook or LinkedIn. These are where a link to a site has more context than just text that’s underlined. It might have an image, a title and a description.

Graphic showing how social media cards are presented for landscape and portrait images on Twitter and LinkedIn
How LinkedIn and Twitter display cards for shared links. Note how the portrait image is cropped and loses all context.

All of this information is pulled from tags on the webpage, Open Graph Protocol (OGP) being the most common. One of these tags tells the social network which image to use in the card. On a WordPress page this is usually the “featured image”.

Images in these cards often have an aspect ratio close to 2:1. That is, the top edge is twice as long as the side edge. It doesn’t matter what dimensions your header image has, this is what will be shown. Other processing may happen, most notably changes to the size and quality.

Bottom line: pay attention to your header images

Far from being visual decoration, header images draw a reader into your content. Before you rush to a stock library, set out standards for how you want images to appear on the page. Choose ones that have a strong point of focus and relate to your content. Be sympathetic with your editing to both their appearance on the page, and technical considerations such as file size and metadata.

I'm Ross, a digital editorial designer and content creator from the UK now living in Japan. I help growing companies plan, source, produce and promote a range of content. Find out more

Never miss an update - subscribe to my weekly email alert.