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.
Starting image, landscape orientation
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
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.
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
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
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
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.
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.
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.
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
Portrait image, mobile device
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.
Contact Us to Get Started
"Your passport to all things web."
To contact us after hours please use the panic button.
Fees may be incurred depending on reason for support.