Great stories feature a hero and a villain.
And here’s an important point to remember…
Both heroes AND villains have powers that influence!
But this article isn’t about stories. It’s about your website.
Your website has a hero.
And in this article, I’m going to show you how to avoid turning your hero into a villain who repels your customers.
The Hero Section of Your Website
The hero I’m referring to is the top part of your website page. It’s what visitors see first when they land on your website.For example, it’s the top section when a visitor hits the home page of your website (before he or she scrolls down). It’s often a large image and some introductory text. Some refer to this area as “above the fold.”
(‘Above the fold’ is a holdover term from the days when printed newspapers put their best story and picture on the top of the front page—above the fold.)
Because this is the first thing website visitors see, it is vitally important you make it a hero…not a villain.
Turning the hero section of your site into a villain hurts your chances to woo customers. But the right hero helps convert browsers to buyers.
So here are a few tips for the background image or picture you use in the hero section of your home page…
Give Your Website Heroes These Superpowers with 7 Tips for Better Hero Pictures
TIP 1: GIVE IT YOUR BEST SHOT.
Take the best picture you have and use it as the background picture for the hero section of your home page.So what is your best picture?FOR PERSONAL BRANDS
If you run a personal brand, the picture should include you.
Before you panic, because you’re not photogenic, remember…
The days of developing film are over. With digital, you can take a thousand shots at it. All of us can look good…even by accident…if given a thousand chances.
Connect the hero picture of you to the work you do.
Here’s what I mean…
If you’re a copywriter, your hero picture might feature you smiling in your home office with a computer subtly in view. (The place where you pen the magical copy that converts.)
If you’re a realtor, it might be a picture of you sitting down with a home buyer who represents your ideal demographic. Perhaps you both are smiling as you walk him or her through some scary looking contract. (Show how your expertise relieves the stress associated with frightening real estate contracts.)
If you’re a consultant, get a smiling picture of you consulting with your ideal client. You could be presenting or showing them what to do on a chart in a conference room.
Pre.S. Don’t miss Tip 7 for personal brands at the end of this article. It’s a gem!
For Businesses (Online or Brick and Morter)
Businesses can get a great hero picture by focusing on:
- Customer transformation (especially for service-based businesses)
- The Brand promise of your product (good for physical products)
I once had a tech company come to me, stumped by what to use for their hero picture on the home page. They provided B2B services for Saas companies. So they didn’t have a traditional “customer”. Their client provided solutions directly to consumers, not them.
My suggestion?
Find a great picture with two smiling people looking at an iPad. This shows potential B2B customers how you help make their customer happy with them (IE with their Saas product.)
But what if you sell physical products?
In some cases, you can go with customer transformation too.
If you sell the world’s most comfortable high heel, show a smiling woman with your heels on in a living room of other women who’ve taken their uncomfortable heels off (and strewn them about the floor).
You can also capture your brand promise in your picture.
One place to look for examples and inspiration is the fiercely competitive home meal delivery market.
Check out the hero pictures for these competitors. See how they picture the product in connection with their brand promise.
Here’s my final piece of advice for tip #1…When in doubt, your home page hero picture should focus on an individual or small group. That could be you or your customer or you and your customer.
Use a killer product photo (without people) if your brand promise is unmistakable. The home meal examples above assume customers will look at the picture and infer, “I could do that at home with their help.”
TIP 2: GO BIG OR DON’T GO HOME…PAGE.
You need a big picture. I don’t mean, “an overhead drone picture from 30,000 feet.” When I say big, I mean file size.Not to get all technical on you, but pictures have pixels. A square Instagram picture is 1080 pixels wide by 1080 pixels tall. That’s not big enough for a great hero image.Here’s why…
Pixels in pictures are like cotton in t-shirts. You can always shrink them, but you can’t make them bigger. And background pictures used in your hero image are set to fill the screen. That’s how they work on the web. The background picture will stretch and grow to fill the screen, from large desktops to iPhones with fancy retina displays.
So you want to start with a large image. Because it will look good displaying across all screen sizes.
Smaller images will stretch to fill your hero. They get blurry, pixelated, and “grainy”. That’s not the first impression you want to make.
A good rule of thumb is to start with a picture that’s 1920x1080. I often ensure my hero image is 2500px wide. (Then I compress it here.)
So choose a large image and leave the grain and grainy stuff to the feed store north of town.
TIP 3: FOCUS ON THE EYES, YA SEE
Here’s a handy tip from professional photographers. (Actually, you know this too. You just don’t know you know.)What makes a great picture when it involves people?Great pictures have the eyes sharply in focus.
Yep. It’s all in the eyes.
Take two pictures where you look great in each. In one, your eyes are a tad blurry. In the other, they’re locked in focus. Your intuition will favor the pic where your eyes are in focus every time.
Once you know this, you’ll start noticing it everywhere. You’ll see it in magazines, stock photography sites, and even in your Favorites collection on your phone.
Take advantage of this tip to strengthen your website hero picture.
TIP 4: CONSIDER PAYING A PHOTOGRAPHER…OR YOU MAY PAY THE PRICE OTHERWISE.
Great photography equals great marketing.Yes, if you’re uber-talented at persuasive copywriting, you can be good at marketing without any photography.But this truth is unavoidable…
You CANNOT have bad pictures and great marketing.
Try one of these little experiments…
Go to the nearest Apple store. Go to any of their devices or computers. Launch the “Photos” app. See the brilliant (professional) pictures. If Apple wants to show off a new fancy retina display…they use an amazing photo. If they want to show you how fast the new iMac crunches video using their Final Cut Pro software…they use amazing video. You will never see an average picture used in their marketing.
If you can, pay a professional for a handful of key shots you’ll use on your website. (And you can use them lots of other places too.)
Consider paying for these simple pictures:
- Personal Brands: You engaging in your work with your ideal customer (1-on-1 and smiling). Use it on your home page.
- Head Shots or Group shot of your Leadership: Use it for your About page. Note: Depending on your turnover or growth, plan on updating this once a year or so.
- Product Shots: Capture your brand promise in a high-quality picture. Show how your product makes life easier, faster, healthier, etc.
If you can get a few more, great. But these are pictures you will use on the two most important and visited pages on your website—your Home page and About page.
TIP 5: STOCK UP ON GREAT PHOTOS.
It’s easier and cheaper than ever to find great stock photography.Stock photos are great for business websites.Personal brands can use them too, with a little creativity.Here are a few shortcuts to finding and choosing stock photography to use as your hero pictures.
I could give you a comprehensive list of all the options. But there are hundreds of articles and lists online for that.
Instead, I’ll share…
THE 4 STOCK PHOTOGRAPHY WEBSITES I USE ALL THE TIME IN MY OWN BUSINESS.
Two are free, and two are paid.My two favorite free stock photography websites are…First up, Unsplash. This is often where I start my search. Photos are free to use and the quality is excellent. Finding the right photo featuring a person can sometimes be a bit more challenging. (That’s because any picture featuring a person’s face requires a legal consent form.) Thankfully, you see more and more “people” pictures added daily.
Next on my free list is Burst. It’s not quite as well known as Unsplash. But you can find some great pictures. Burst is brought to you by the good folks at Shopify. Check it out when you’re on the lookout for something unique.
Now on to my two stops for paid stock photography.
I always start with Stocksy. It’s a little off the beaten path from other more popular paid stock photography websites. But I love the images they curate. It’s easy to find other sites with larger stock libraries. But quantity isn’t the same thing as quality.
Bottom-line: Stocksy helps me find great images fast.
If I can’t find exactly what I need on Stocksy, I’ll head over to the more familiar iStock. (My first iStock download was March 16, 2004!)
I start by searching iStock’s Signature images. These curated images help save time from searching through iStock’s ginormous library. I rarely use the lower-priced, and lower-quality Essentials images.
Wherever you search for images, do yourself a favor…
Create a collection around your project and save potential photos into the collection. Unsplash, Stocksy and iStock let you save images you like into collections.
Whenever I’m searching for pictures, I save them to an easy-to-remember collection. Then I can come back and find a picture I liked for similar use.
Tip 6: Avoid this rookie mistake…
One huge rookie mistake I often see is to use a high-quality picture for your hero…that has ZILCH to do with your business.If you sell vacuums, don’t use a picture of a snowcapped mountain as your hero image. Nobody vacuums Everest!
In the end…
If you’re a personal brand, put YOU in the hero picture.
If you’re a business with a product or service, put the impact of your product or service in the hero picture.
Avoid the rookie mistake of using a stock photo of the beach for your hero…unless you sell beachwear or sunscreen.
BONUS TIP 7 FOR PERSONAL BRANDS: TOGETHER IS BETTER…AND CHEAPER!
Try this genius move if you’re a personal brand.When it came time for me to get some professional photos to use on my website, I had this idea.
I grabbed two friends who looked like the kind of clients I help AND who had personal brands of their own.
We then hired a photographer together and did a single photoshoot. For one shot, I played Taylor’s client. In the next shot, Taylor pretended like he was mine.
Being the star of your own photoshoot feels weird for most of us. Doing it with a few buddies makes it way less awkward!
Try it out.
We each got fantastic pictures at a fantastic price. I highly recommend it.
Summarized in a Snapshot
If you skimmed this entire article and your eyes land here, let me give you my best advice in a single snapshot.But first, a reminder about why this is so important…The quality of your hero image says either: You can trust me…or you can’t!
Browsers will make an immediate judgment about you based on the hero image—especially your home page.
That may seem superficial or unfair. (Until you realize you do the same thing.)
Customers are busy. And they’re wading through a deluge of media, marketing, and information overload like you.
So here’s my best advice boiled down in the simplest terms…
Use the best picture you have for your home page hero.
That picture will get more potential customer eyeballs than any other marketing you have. Use it to build a bridge of trust with customers, not burn it.
