How to Choose the Right Header Image

Not all images will work in the header of a website. Many people prefer the look of websites that have large, wide images when displayed on a desktop or laptop computer. Let’s take a look at how different images fit into these wide spaces.

You don’t need a fancy camera to take a good photo. Modern cell phones take large and good quality photos!

Starting image, landscape orientation

How to Choose the Right Header Image -

Here is the image we’re starting with. It is a standard, landscape orientation photograph. What’s nice about this photo is that there is at least a little bit of space on any side of the subject (top, bottom, left, right). This gives a designer some wiggle room when trying to make the image fit into a specific size space.

Large, landscape image

How to Choose the Right Header Image -

In this example, the image dimensions are 2000 x 1000. That is 2000 pixels wide by 1000 pixels tall. It’s wider than it is tall. This image is set to “cover” the entire space. The positioning isn’t great, but it could be worse. Notice that the top of the image is cut off, but you can still see the entire subject.

How to Choose the Right Header Image -

In this example, we used the same 2000 x 1000 image. However, the image is set to “contain” the image within the space constraints. Notice the white space on the right and left of the image. None of the top or bottom of the image has been cut off here.

Large, landscape image, cropped

How to Choose the Right Header Image -

In this example, we started with the same 2000 x 1000 image. The artist deliberately cropped the image so that the subject says in the middle. The artist also made the width of this image exactly the same size as the space we were trying to fill.

Starting image, portrait orientation

How to Choose the Right Header Image -

As you’re about to see, not all images look great in a header! This is our portrait start image. It is 1920 pixels by 2560 pixels. It is taller than it is wide.

Large, portrait image

How to Choose the Right Header Image -

In this example, the image dimensions are 1920 x 2560. This image is set to “cover” the entire space. We have set the image to be “centered” within the space. Notice that we can see the whole width of the image, but much of the top and bottom is cut off.

How to Choose the Right Header Image -

In this example, we are using the same 1920 x 2560 image, but it is set to “contain” the full image within the space provided. Notice all the white space to the right and left of the image. It is also very small which makes it difficult to see the details in the image.

Small images

How to Choose the Right Header Image -

This is a very small image. The starting dimensions are 482 x 408. When placed in a header space, it is difficult to see all the details.

How to Choose the Right Header Image -

But, if we use that same 482 x 408 image in the header and try to fill the space, the image quality suffers. There is no way to see the top and bottom of the image in such a short space.

What about mobile?

It is possible to find an image that works well on both a mobile and desktop display. However, it is a difficult task. One way to combat this issue is to choose a different image for mobile and desktop devices. Take a look.

Landscape image, mobile device

How to Choose the Right Header Image -

Portrait image, mobile device

How to Choose the Right Header Image -

Want to see just how much an image gets cropped?

We’ve created an aspect ratio tool for you to use. Play around with the size of your browser and see just how much of the image you can see. The image is 10×10 for reference. See how much gets cropped in your browser versus your cell phone versus your tablet. It’s the exact same image placed in the page as a normal images versus as a header image.

Header Image

Example Header

Normal Image:

How to Choose the Right Header Image -

Leave it to the professionals

Adding pictures to a hero header, an image that is very large and at the top of the website, or adding images to a slide show is probably best left to a web designer, unless the user understands pixels, dimensions, and the software to crop and adjust the images to the proper size before uploading.

In addition, the actual size, in megabytes, needs to be considered.  Uploading a large image, without the proper compression can cause the page to load very slowly.  For instance, the above example may have started out as 10 megabytes in size.  If the image is uploaded, with no consideration for size or positioning, that could slow your website to the point where it could take minutes to load a page instead of seconds.  On the other hand, the image that was done by the designer was cropped and then compressed, taking the size down to 1 mb or less which will load in milliseconds instead of minutes or even seconds.

Even with a designer’s help, some images are just not the correct aspect ratio to be used on a website.  Always think landscape when choosing large images for a website.

For the most part, hero and slide images can be easily changed, but should be left to a professional.

Looking for more on choosing images for your website?

blog post title image
blog post title image

Search

Sign Up for Our Newsletter

Thank you for your interest in our newsletter! Fill in the form below to receive periodic updates on internet and website security, free cybersecurity posters, WordPress news, and more!

"*" indicates required fields

Name*

Your privacy is important to us. We do not share your information with anyone. You can opt out of our newsletter at any time.

Stay up to date with technology, scams, WordPress, and more. Follow CourseVector on Facebook today!