4 Tips for Choosing a Hero Image for Your Directory Website
Published on April 11, 2022
Did you know it takes about 50 milliseconds for someone to form an opinion on your website? That’s why good design and the right imagery is so important. What you put at the top of your page matters, especially when you have less than the blink of an eye to engage visitors.
When you start a business directory website with Ideal Directories, you’ll receive your business directory website complete with a high quality hero image that you can keep or exchange for something another image of your choice.
Choosing a hero image that works for your brand can mean the difference between someone staying or going, yet this is an often overlooked part of web design. We understand the challenge to pick the right image, but with the right guidance it doesn't need to be a difficult task at all.
In this article we’ll review the qualities that make a good hero image, what to avoid and how to choose one for your own directory website.
What Is a Hero Image?
Let's start simple. A hero image is a key component to an attractive, compelling web page design. It is, at its core, nothing but an image in a large banner, but beyond that, it is a visual representation of your brand.
The hero image tells your viewer what your business/website is about, what you stand for, and outlines your aesthetic into a single, pleasing picture. It does the monumental task of conveying vital information, so you really want to make sure you get it right.
If we were to break down what the structure of a typical directory website looks like, the hero image should be the first thing that draws your eye and dominates the full first half of the screen.
Hero images often include a call to action (CTA) that encourages visitors to click through to browse your website or learn more about your brand. Your CTAt depends on the aim of your website. For example, the CTA for a directory website is to encourage visitors to search for businesses on your site.
Choosing a Hero Image
To be clear, the phrase 'hero image' doesn't imply your photo needs to be of a human, animal, or mascot. In fact, it doesn't strictly need to be a character of any kind.
Your image could be a pivotal theme, device or structure, or even an abstract model or composition. The immediate goal is to grab the viewer's attention. You can achieve this through a quick visual, emotional, and educational connection. For example, you may choose a park, monument or landmark that distinctly represents your directory’s town or city.
Here are 4 tips for choosing a hero image for your directory website.
1. Choose Something Relevant
Sometimes the most obvious choice for a hero image would be an image of your product or service. However, in the case of a business directory website, you may need to think outside the box to create a more engaging design. Since your brand doesn't sell something tangible, you'll need to be more inventive with your image selection.
Popular hero image choices for directory websites include photos of small businesses. Perhaps it’s a close up image of a small business owner, a storefront or even a “main street” in your community. If you’re trying to appeal to local customers searching for coupons and deals, you may want to consider an image of a person shopping or saving money. Another option is to choose a photo that represents your local community.
For inspiration, try Googling your directory website’s town or city to see what type of images populate. Then you can drive around and capture a few similar images that appeared in your Google search as well as new ones that depict the area.
And if anything else, stock photography can seriously save the day. However, it's all too easy for a visual to feel a bit too "cookie-cutter," so make sure you're choosing stock images that fit your brand and message.
2. Keep Image Quality in Mind
You want a high-resolution, clear, and focused graphic for your hero image. Blurry images or pictures that seem pixelated are going to distract from your messaging and have a negative impact on your brand. However, be mindful that larger images can dramatically slow down the loading time for your page.
At Ideal Directories, we automatically size down images for optimal page load speed, but we have a 10MB limit on image upload size. If your image is larger than 10MB, you will need to reduce the size prior to uploading.
You also want to consider the aspect ratio. Aspect ratio is simple. It's the relationship between an image's width and height. To make your site look its best, your hero image should be wider than it is tall. We recommend 1,500 pixels wide x 1,000 pixels tall (1.5:1 ratio). Regardless of the size of the image you upload, however, since this is a background image, users may see different parts of the image, depending on the screen size of the device they're using.
3. Consider the Composition
We cannot overemphasize the value of good composition. A good composition has just enough detail without being overbearing. The right composition leads the eye around the page and guides your viewer to where you want them to look.
A bad composition has no focal point, no direction, and is either too distracting or far too simple. For example, a beach panorama makes for a lovely hero image, but a beach scene with a romantic couple placed strategically on the screen can help focus the viewer's eyes. This would be the ideal place to put some text or a CTA.
Depending on what you're aiming to achieve, you may also need to consider leaving space in your image for additional text and a title. You don't want people struggling to read your text because the image behind it is distracting or overpowering. This is the fastest way to get someone to leave your page before even giving you a chance.
Another example of a poor composition that only ends up looking unprofessional is to have a hero image of people where the heads are cut off or obstructed by text or other content. We want to see faces!
4. Send a Message
The image you choose also has great power. Emotion and connectivity are crucial components to consider when choosing a hero image. A hero image is a quick and easy way to engage a customer.
Think, first and foremost, of the type of message you're trying to send, and pick a photo which represents that. If you want people to feel welcome and invited, choose an image that conveys that message.
Even if you're not selling a product, you can still use your hero image to quickly and concisely convey vital brand information. Maybe your directory is geared towards a specific niche such as restaurants. You could choose from a variety of images that depict a restaurant such as a group of people sitting around a table or a plate of delicious food.
Each of these restaurant image examples could convey a different meaning. For instance, if you select the image of a group of people around a table, this sends the message of satisfaction, enjoyment, and sociability, while a photo of food could indicate gourmet meals and a fine dining experience.
A Picture is Worth More Than a Thousand Words
Choosing a hero image needs to be about more than how eye-catching it is. If done properly, the right photo explains what your website is about and enhances the clarity of your brand messaging while complementing your company's value offer.
With the right image, you can better persuade your consumers, increase the perception of your brand, and move audiences with your design.
If you’ve been thinking about launching your own business, contact us and let's work together to get your directory website business started today.
Did you know it takes about 50 milliseconds for someone to form an opinion on your website? That’s why good design and the right imagery is so important. What you put at the top of your page matters, especially when you have less than the blink of an eye to engage visitors.
When you start a business directory website with Ideal Directories, you’ll receive your business directory website complete with a high quality hero image that you can keep or exchange for something another image of your choice.
Choosing a hero image that works for your brand can mean the difference between someone staying or going, yet this is an often overlooked part of web design. We understand the challenge to pick the right image, but with the right guidance it doesn't need to be a difficult task at all.
In this article we’ll review the qualities that make a good hero image, what to avoid and how to choose one for your own directory website.
What Is a Hero Image?
Let's start simple. A hero image is a key component to an attractive, compelling web page design. It is, at its core, nothing but an image in a large banner, but beyond that, it is a visual representation of your brand.
The hero image tells your viewer what your business/website is about, what you stand for, and outlines your aesthetic into a single, pleasing picture. It does the monumental task of conveying vital information, so you really want to make sure you get it right.
If we were to break down what the structure of a typical directory website looks like, the hero image should be the first thing that draws your eye and dominates the full first half of the screen.
Hero images often include a call to action (CTA) that encourages visitors to click through to browse your website or learn more about your brand. Your CTAt depends on the aim of your website. For example, the CTA for a directory website is to encourage visitors to search for businesses on your site.
Choosing a Hero Image
To be clear, the phrase 'hero image' doesn't imply your photo needs to be of a human, animal, or mascot. In fact, it doesn't strictly need to be a character of any kind.
Your image could be a pivotal theme, device or structure, or even an abstract model or composition. The immediate goal is to grab the viewer's attention. You can achieve this through a quick visual, emotional, and educational connection. For example, you may choose a park, monument or landmark that distinctly represents your directory’s town or city.
Here are 4 tips for choosing a hero image for your directory website.
1. Choose Something Relevant
Sometimes the most obvious choice for a hero image would be an image of your product or service. However, in the case of a business directory website, you may need to think outside the box to create a more engaging design. Since your brand doesn't sell something tangible, you'll need to be more inventive with your image selection.
Popular hero image choices for directory websites include photos of small businesses. Perhaps it’s a close up image of a small business owner, a storefront or even a “main street” in your community. If you’re trying to appeal to local customers searching for coupons and deals, you may want to consider an image of a person shopping or saving money. Another option is to choose a photo that represents your local community.
For inspiration, try Googling your directory website’s town or city to see what type of images populate. Then you can drive around and capture a few similar images that appeared in your Google search as well as new ones that depict the area.
And if anything else, stock photography can seriously save the day. However, it's all too easy for a visual to feel a bit too "cookie-cutter," so make sure you're choosing stock images that fit your brand and message.
2. Keep Image Quality in Mind
You want a high-resolution, clear, and focused graphic for your hero image. Blurry images or pictures that seem pixelated are going to distract from your messaging and have a negative impact on your brand. However, be mindful that larger images can dramatically slow down the loading time for your page.
At Ideal Directories, we automatically size down images for optimal page load speed, but we have a 10MB limit on image upload size. If your image is larger than 10MB, you will need to reduce the size prior to uploading.
You also want to consider the aspect ratio. Aspect ratio is simple. It's the relationship between an image's width and height. To make your site look its best, your hero image should be wider than it is tall. We recommend 1,500 pixels wide x 1,000 pixels tall (1.5:1 ratio). Regardless of the size of the image you upload, however, since this is a background image, users may see different parts of the image, depending on the screen size of the device they're using.
3. Consider the Composition
We cannot overemphasize the value of good composition. A good composition has just enough detail without being overbearing. The right composition leads the eye around the page and guides your viewer to where you want them to look.
A bad composition has no focal point, no direction, and is either too distracting or far too simple. For example, a beach panorama makes for a lovely hero image, but a beach scene with a romantic couple placed strategically on the screen can help focus the viewer's eyes. This would be the ideal place to put some text or a CTA.
Depending on what you're aiming to achieve, you may also need to consider leaving space in your image for additional text and a title. You don't want people struggling to read your text because the image behind it is distracting or overpowering. This is the fastest way to get someone to leave your page before even giving you a chance.
Another example of a poor composition that only ends up looking unprofessional is to have a hero image of people where the heads are cut off or obstructed by text or other content. We want to see faces!
4. Send a Message
The image you choose also has great power. Emotion and connectivity are crucial components to consider when choosing a hero image. A hero image is a quick and easy way to engage a customer.
Think, first and foremost, of the type of message you're trying to send, and pick a photo which represents that. If you want people to feel welcome and invited, choose an image that conveys that message.
Even if you're not selling a product, you can still use your hero image to quickly and concisely convey vital brand information. Maybe your directory is geared towards a specific niche such as restaurants. You could choose from a variety of images that depict a restaurant such as a group of people sitting around a table or a plate of delicious food.
Each of these restaurant image examples could convey a different meaning. For instance, if you select the image of a group of people around a table, this sends the message of satisfaction, enjoyment, and sociability, while a photo of food could indicate gourmet meals and a fine dining experience.
A Picture is Worth More Than a Thousand Words
Choosing a hero image needs to be about more than how eye-catching it is. If done properly, the right photo explains what your website is about and enhances the clarity of your brand messaging while complementing your company's value offer.
With the right image, you can better persuade your consumers, increase the perception of your brand, and move audiences with your design.
If you’ve been thinking about launching your own business, contact us and let's work together to get your directory website business started today.
Questions? Interested in Learning More?
We'd love to hear from you. Contact us today to learn more about the Ideal Directories platform and how you can launch a business directory and coupon website in your market.