A ruler with a hero image on top of it.

How to pick the best hero images for your website

Something my clients often ask for help with is selecting the right photos for their websites.  Hero images, which are the large banner style images you often find on homepages, are usually the biggest challenge. Here are some tips and a video on how to pick the right images:

First, here is an example of a photo of a woman on a bus.  You can see her head and hands are near the top and bottom of the photo:

Woman on a bus cropping example

Here is the same photo in Photoshop with a 1600x800px crop – you can see that both her head and hands can’t be in the photo.

Woman on a bus cropped

In this second example, an up close portrait photo proves troublesome for a hero image area:

Portrait crop example

You barely get his features in the hero image cropping (1600×800).  He would be all nose!

Next this portrait oriented photo has the subject less prominent:

Portrait crop subject farther away

While you do get a better result on the hero cropping (1600×800) but most of the photo is lost.

Finally, here is a before of a good choice for a hero image. It is a landscape oriented photo with the subject closer to the middle than the edges:

Good photo for hero image before

Here is a cropped example using PicMonkey.com to create the cropped area:

Good photo for hero image after

I hope this helps you in selecting hero images for your website.  And never forget to view your website on your phone and tablet, too!  Your hero images will appear different on each screen size. Cropping between 1600x800px and 1900x950px is your best range.


Cami MacNamara

Providing web design services from West Seattle, WA since 2002.

Are you a fellow web designer?

Join the Community @  WebCamiCafe.com