How To make a Stunning Website Hero Image

Let’s dig into it.

What is a hero image?

A hero image is a large image that appears at the very top of a webpage. Hero images can appear on different pages throughout a website, but they’re most often used on a website’s homepage, beneath the header and navigation bar.

A hero image takes the biggest of the real estate space on your homepage. In some ways, it performs the same function as a landing page. Your hero image acts as a first impression for your brand, meaning they can be a very valuable property to your business if used correctly.

A hero image is a large image that appears at the very top of a webpage. Hero images can appear on different pages throughout a website, but they’re most often used on a website’s homepage, beneath the header and navigation bar.

A hero image takes the biggest of the real estate space on your homepage. In some ways, it performs the same function as a landing page. Your hero image acts as a first impression for your brand, meaning they can be a very valuable property to your business if used correctly.

What should a excellent website hero image include?

Great hero images are generally composed of three elements: 

• An eye-catching image
• Compelling copy
• A powerful call-to-action (CTA)

A considerate combination of each of these elements can navigator to a persuasive hero image that compels the visitor to receive the action you desire them to, helping to boost conversion rates. You’ll view how these elements work together in the hero image examples below.

Let’s receive a look at the three essential elements more in-depth:

1. An eye-catching image

The human eye loves large, bold and luminous images. Whether you use graphics, photographs, or illustrations is dependent on your brand⁠—but what’s always significant is that your images are high-resolution and attention-grabbing. 

Hero images should be the most prominently displayed items on your homepage, which is something to keep in mind when considering your homepage design. 

All Shopify themes all include a large section for hero images along with a suggested resolution, so you recognize exactly how to size your hero images. Some themes even include additional functionality options for hero slideshows, banner videos, and on-page animations. 

stake photo image resources

If you schedule on doing your own product photography, you’ll desire to make sure you’ve done enough research to recognize how to receive professional, high-standard images. If you’re looking to save some period, you might desire to consider using stake photography. 

There are a ton of places to leave online to discover professional, high-standard images for your website. To assist your search, we’ve listed some of the best sources for you to discover your next image:

No expense, royalty-free image resources

If you’re looking for free stake photos and graphics, here are a couple of options to consider: 

• Burst by Shopify: Burst is the stake photo site built by and for entrepreneurs. On Burst, you can discover high-resolution product photos and lifestyle images that are perfect for marketing campaigns and social media. If you have a Shopify store, you’ll be able to add photos from Burst directly from your theme editor. 
• Pexels: Pexels contains thousands of free stake images uploaded by users or sources from free image websites. 
• Unsplash: Unsplash offers more than 2 million free, high-resolution images from its throng of photographers.
• Pixabay: Pixabay offers images that are free to use for commercial and non-commercial purposes, though it’s significant to note that some images are still be protected by trademarks, publicity or privacy rights. 
• Stockvault: Stockvault offers free stake photos along with web design layouts and logo templates. 
• Canva: Canva is an all-in-one website design tool that also includes a collection of free and paid stake photos for commercial use. 
• Stocksnap: Stocksnap offers a wide variety of free stake photos for use on commercial and non-commercial projects. 

Paid image resources

If you have a monetary schedule to work with for your hero images, consider some of the better paid resources for higher standard images and photos. 

• Shutterstock: Shutterstock has an extensive library of more than 300 million images from photographers all over the globe, making it the perfect resource for trip photography. 
• Adobe stake: Designed to work with Adobe’s suite of design tools, Adobe stake contains thousands of stake photos, hero image design templates, stake videos, vector art, and illustrations. 
• Getty Images: Though on the pricier side, Getty Images contains a deep archive of contemporary and historical photographs available for purchase. 
• iStock: iStock is owned by Getty Images, so you may view some overlap in terms of what photos are available. Still, iStock allows photographers to sell their photos on other platforms, so you will discover a wider, more contemporary collection than on Getty. 
• Dreamstime: Dreamstime offers a variety of stake photos, videos, vectors, and illustrations⁠—both free and paid⁠—with different licensing options.

Hire a freelance photographer

Of course, stake photos will always be just that, stake photos. If you have some period and maybe a bit more of a monetary schedule, you might consider hiring a professional photographer and shooting your own photos. 

Here are a couple of other options for exploring freelance photographers: 

• Hire a Shopify specialist: Use Shopify Experts to browse freelancers and agencies specializing in specific disciplines like photo editing and product photography. You can even hire freelancers based on industry-encounter⁠—so if you require a food photographer, you can browse food photographers. 
• Fiverr: Fiverr offers a wide variety of freelancers who specialize in everything from product photography to web design. 
• Freelancer: Freelancer’s database includes experts in a wide range of creative fields, such as photography and illustration. 
• Upwork: Upwork allows entrepreneurs to post jobs and connect with freelancers who have the encounter and skills to assist them. 
• Guru: Guru offers freelance photographers with expertise in all types of photography, like fashion photography, street photography, landscape photography, and a whole lot more.

2. Compelling copy

In advertising and marketing, copy describes the written material of a piece of media. For entrepreneurs, copywriting is a useful skill to have in your arsenal. 

Users only glance at your hero image for a instant before moving on, so you only have a few seconds (at most) to grab the user’s attention. excellent copy should address customer needs in a way that’s straightforward to comprehend. 

Here are some quick tips for writing compelling copy: 

• Be concise: Long-form copy has its place, but a banner image is not it. Banner copy should be punchy and to-the-point. 
• Avoid challenging-to-read fonts: Rarely-used fonts can receive more period to read. Though the additional period may be minimal, every millisecond counts when it comes to banner image copy. 
• Replicate the tone of your customers: Users tend to be more receptive to language that feels familiar to them. Consider the language your target spectators uses on social media and use it to inform the style of your writing.
• Focus on benefits, not features: Instead of saying, “Our customer back throng is available 24/7 to respond any questions”, declare “Get answers quick with 24/7 customer back.”
• Don’t be afraid to test different copy: Hero images are prime candidates for A/B testing, since different word-choices have the potential to drastically alter how your visitors interact with your hero image design. 
• Avoid marketing buzzwords and cliches: Users’ eyes tend to gloss over commonly used advertising slogans like, “act quick”, “huge reserves”, and “satisfaction guarantee”.

3. powerful Call-To-Action

Finally, all hero images should characteristic a prominent call-to-action (CTA). A CTA is the text that tells the reader the action you desire them to receive, usually accompanied by a button that takes that action. Examples include “Shop now”, “Sign the petition”, or “discover more”.

How you write your call-to-action depends on which segment of your marketing funnel you’re addressing. If you’re addressing top-of-funnel users, you might inquire them to “discover more”, whereas for bottom-of-funnel users, the CTA might be a more direct “Buy here”.

comprehend the purpose of your hero image

You can use this valuable piece of real estate for several purposes depending on your business and goals. Let’s receive a look at some of the most ordinary approaches for using hero images below:

1. To assist construct your brand and inform your narrative

One potential use of your website hero image might be brand storytelling. Brand storytelling is the use of narrative to communicate the distinctive selling proposition of your brand. Storytelling is a very effective way of brand-building, because a excellent narrative tends to be memorable.

2. To respond customer questions 

Another ordinary way is to characteristic answers to a commonly asked question. You might address a ordinary customer pain-point or use the space to respond period-sensitive questions your visitors may have.

3. To highlight your worth proposition

Brand storytelling isn’t the only way to now your distinctive selling proposition. Your brand will be more memorable to visitors if they comprehend what makes it different from competitors. What better place to inform your customers your worth proposition than correct on your homepage, where the majority of visitors land.

4. To make an announcement

Your homepage banner is a key piece of real estate for promoting sales, events, product launches, and other significant announcements. Banner images get most of your website visitor’s attention, so any announcement you desire to be widely-seen is a excellent candidate for banner image content.

Optimize your website with a stunning hero image

There you have it, the rationale, purpose and uses of a hero image on your homepage. Changing these images up frequently keeps your store feeling fresh to repeat visitors, keeps it lively and drives visitors to receive the actions that are most inline with your conversion goals.

How to make a hero image for your online store

Creating a well-designed and attention-grabbing hero image helps draw recent website visitors in and get them to explore even more of your products. Check out this step-by-step navigator for how to make a hero image for your online store.

1. Use high-standard product imagery

Draw recent customers in with stunning photos of your products or brick-and-mortar store. You can always use professional stake photography here, it’s best if you’re able to hire a photographer to receive high-standard photos of your specific products.

Here’s a great example from an online plant store. Anyone visiting this site is likely interested in plants and will easily be drawn in by the stunning greenery in their hero image.

2. make a graphic using an online design tool

You can spice up your product photos or make a hero image by using graphical elements instead. discover an online design tool like Canva, Visme, or Adobe Cloud, and put together an eye-catching graphic.

Here’s a great example of what this could look like—Detour Coffee has created a cut-out of their product and placed it on a graphic with bold colors and shapes to grab attention. 

3. Add the most-relevant call-to-action

No hero image is complete without a call-to-action (CTA), so add a button that’s specific to the image or graphic you’ve included. 

You also desire to make sure your button matches the overall design so that it pops but doesn’t seem out of place. Here’s a great example of what that might look like:

4. Use video as part of your hero image

Another great way to grab attention is by creating a looping, soundless video or GIF for your hero image. For example, the Nomz website has a number of video clips that appear, pulling the website visitor in and getting them to remain on the page longer as they watch the packed scene.

5. Regularly update your hero image

Your hero image isn’t a one-and-done procedure. Although you may adore the one you have, you’ll require to update it every so often to introduce returning customers to even more products and offerings.

You may even consider creating a hero image slider so that you can distribute multiple calls-to-action at once. This is a great concept when you’re wanting to promote an upcoming holiday, like we view in the example below, while still promoting other product lines.