Whether you notice it or not, judge any website based on its visual appeal. And it only takes about 0.05 seconds to form an opinion. That means the hero picture (the first photo, graphic, or video people see) needs to be eye-catching enough for people to scroll the site.
High quality hero images are the key to a good first impression. When done well, they represent the essence of your brand identity and the overall theme of your website.
Yes, it is a lot of weight for visual content. That’s why it’s the most heroic of them all.
This guide will teach you how to add the perfect hero image to your website, from choosing a graphic that is inspired by the latest design trends to making sure your image is the optimal size. We’ll also go through examples of hero images to come up with ideas for your own website. Get ready for some design visual treat.
Hero image in web design
If appealing visuals are the crowning glory of any great design system, a hero image is the shiny, red cherry. It attracts the eye and makes you want more.
In web design, a hero image is the first photo, graphic, illustration or video that people see on a website. It typically includes both an image and text to convey a company’s core message. Hero images are located above the crease and often include a call-to-action (CTA) that encourages people to dig deeper into the website. The aim of this picture is to add energy and tension to a page. You want it to show your brand’s style, share the purpose of your website, and encourage people to explore.
A good hero image can increase your traffic and conversions by getting people to interact with your website. Animations, carousels and effects triggered by scrolling are ways to develop your creativity beyond the typical stock photography. But a bad image can bring down an otherwise great design. Non-branded graphics, large files that slow down loading speeds, and meaningless copies can ruin the user experience.
A common mistake when designing a hero image is getting the file size right. Too big, your loading speed will drop. Too small, everything looks pixelated. Let’s go through the different hero picture sizes so that you can create a stunning picture every time.
Dimensions of the hero image
Finding the right aspect ratio and cropping can be confusing when sizing a hero picture. Banner hero images are not the same as full screen images, and each image must be scaled to fit the room. You also need to keep in mind that no one surfs like that. Personally, my screen is usually zoomed in at 120%, but others may have dozens of tabs open, all of different sizes.
Some cropping inevitably occurs when your hero image is scaled to fit a variety of screens. Therefore, it is best to view the following dimensions as guidelines rather than rigid rules.
1. Full screen and banner image dimensions
The ideal size for a hero picture in full screen mode is 1,200 pixels wide with an aspect ratio of 16: 9. The ideal size for a banner hero image is 1600 x 500 pixels.
If you need crystal clear images or if your target audience is surfing on big screens, they may need to be up to 1,800 pixels. Note that this can result in a large file size that will slow down your website.
You can check your desktop and mobile loading speeds with PageSpeed Insights from Google. It gives a comprehensive overview of which site content is loaded first and where there is room for improvement. Aim for a page load time of a second or two as you will likely lose people if it is more than five seconds.
2. Dimensions of the Mobile Hero Image
The ideal size for a mobile hero picture is 800 x 1,200 pixels.
While it’s important to consider what your hero image will look like on a desktop, you can’t ignore the mobile experience. Almost 55% of global website traffic in 2021 will be generated on a mobile phone.
Your hero image design must be responsive and have a vertical (phone) and horizontal (tablet) orientation. Dynamic hero images like videos work well on a desktop, but often need to be swapped out for a static image for mobile devices. Videos take longer to load and no one wants to hit their data plan massively just to see your website.
3. Compression of hero images
You want to compress your hero image if you have a large file size (anything over 1MB is too big). You can use websites like TinyJPG, Compress JPG, or Adobe’s Photoshop Compressor to shrink the size without sacrificing quality. Just make sure you have set the dimensions correctly beforehand, otherwise the image may appear blurry or stretched.
When sizing a hero picture, check your google analytics to see the typical screen resolution of your website visitors. Then design with that audience in mind. Remember to test your hero picture on multiple browsers, screens, and phones to see how it scales. Once you have the correct dimensions, you can incorporate them into your website using HTML and CSS.
Hero image HTML Image
HTML is a programming language that consists of elements that give structure to a website. It creates order and lets you embed content (like hero images) in a site.
Creating a hero image with HTML ensures your image will appear on a webpage, while CSS will make it look good on a screen. Both require programming skills, so you may need to brush up on your HTML and CSS skills, or get the help of a developer.
The most important things to keep in mind are:
- The hero image must be centered.
- The text must be easy to read.
- It has to look good on all screen sizes.
- The image should cover the entire viewport.
Follow these steps to set up an eye-catching hero image. Note: The following examples include HTML elements and CSS rules, but I’ll explain the difference between the two later.
1. Build the structure.
Set up two containers for your hero image using your website’s coding conventions. For example, the first example below uses .hero for the structure and .hero-content for the image, text and button, while the second uses .image-container and .inner-container.
2. Add your content.
Once the structure is in place, it’s time to personalize your image. Add an image, choose a custom font, create a header and subheader, and create a button with an enticing CTA. If you want to add a filter to your background image (without applying it to the text), DeveloperDrive recommends including the filter before your .hero-content code.
Notice how the width and height are set to 100vw and 100vh in the .hero section. This ensures that the image fits the entire viewport both vertically and horizontally, so that it spans the entire screen.
No hero image is complete without a button that gets people to take action. Incorporate one into your picture with the
3. Center the content.
Not all hero images have centered text, but most have a centered image. To align your background image, you can create a flexible container by integrating display, Justify content and Align items under your .hero element.
For centered text, add a .text-align: center rule under your core content item. In the following example, the text is nested under the .hero-content code.
4. Make it responsive.
You want your hero picture to look great regardless of the screen size. By setting media queries, you can create parameters to make your image respond at a specific width of the screen.
5. Test the view.
Congratulations, your HTML structure is set! Test how the image, text, button, margins, padding and centering look on different screen sizes. If something is wrong, search your code to see if you can find any problems. For detailed instructions on how to create and fix problems with HTML, see this article from DeveloperDrive. Do they all look good? It’s time to add style with CSS.
Hero image CSS
While HTML creates order, CSS (Cascading Style Sheets) creates flair. It is a rule-based language that complements the HTML elements with stylistic effects. For example, CSS lets you color the text in a Hero Image header light yellow so that it is highlighted against the purple background.
If you don’t include CSS in your hero image, the HTML elements default to basic browser properties, as in the following example.
That’s not the most attractive website, is it?
By incorporating CSS rules, you can come up with an image that will attract, rather than deter, visitors. The HTML examples above include CSS rules, but let’s go through a basic design so you can work it into your own image.
The following template describes the basic HTML and CSS required to create a hero image in full screen mode. You can customize the style by changing the rules under the .hero or .hero text elements, such as: B. font-family, color, border or padding-top.
For more information and inspiration on using CSS for images, visit the hero-image forum on GitHub. Now is the time to find out what good hero image coding can do for a company’s website.
Examples of hero images
Like all creative media, hero images are influenced by trends. Do you remember when clipart was cool? How about every news site hit you with a splash page?
To create a relevant hero image today, check out these design trends.
1. Parallax and scroll animation
We experience parallax every day when we drive past cars or walk down the street. It is the optical illusion that causes objects near us to move faster than objects further away. In web design, parallax uses foreground and background to recreate this effect. The result works like magic. Just be careful not to overwhelm visitors with too many moving elements. Simplicity is the key here.
Scrolling animation makes participation the goal. Good scrolling animation encourages people to keep scrolling before providing a unique, engaging experience. Scrolling animations are available in a variety of packages and work in a number of industries such as retail, creative services, news publishing, education, and more.
2. Abstract compositions
Circles, triangles, stripes and blocks of color are all the rage again. Instead of restricting space and making sure everything has its place, abstract hero images evoke a sense of freedom and creativity. You can find this trend is taking over tech companies and startups, like this example from Zendesk, which wraps videos into an abstract semicircle to keep the design playful.
3. Soft color schemes
The average adult spends nearly eight hours a day using digital media – and that can cause a lot of eye strain. Web designers have taken note of this and tend towards hero images with neutral, appealing color palettes. This trend is popping up on retail, wellness, and medical websites to provide a more enjoyable experience that is easy on the eyes.
4. Products as design elements
Products are the star of the show when it comes to hero images. Companies want to show their offers and attract visitors to find out more about the functions. With hero images, it often happens that products are used as graphic elements or deconstructed so that visitors can immerse themselves in the details. Tech and retail companies often use this type of hero image, but it can work for any brand that wants their product to be front and center.
5. Lifelike color
So long flat colors, hello fine 3D shading. This hero image web design trend is about making people feel like they are on screen. Designers create these realistic experiences with gradients, shadows and mixed colors. While this trend is likely to stay in tech and apps, it’s great for drawing people into the world of your website.
Research from Wyzowl found that watching a branded video convinced 84% of people to buy a product or service. This makes videos the perfect visual content for an attention grabbing hero image. If you do decide to have a video, it’s best to keep it under 30 seconds and on a loop. As mentioned above, you should swap the video for a static hero image for your mobile website so that it doesn’t eat up data or take a long time to load.
Best practices for hero images
Trends are only part of creating a great hero image. The rest of the magic is based on proven design standards. Even if you’re not a trained designer, you can follow these best practices for a hero image that resonates with your audience.
We already talked about the best dimensions for hero images above (1,200 pixels and an aspect ratio of 16: 9). So, think of this as a reminder of the importance of being the right size. You don’t want browsers to resize an image for you, or you might end up with a funky, stretched image that will turn visitors off.
Pro tip: experiment with PNG and JPG files to see what results in faster page loading speeds.
People will be instantly distracted by bad design and will leave your site if your hero image doesn’t blend in with the rest of your layout. Keep your aesthetic in tune by carefully choosing fonts, sizes, colors, navigation, graphics, and copies.
It is helpful to refer to your brand identity and guidelines when developing a concept for the hero image. You don’t want people to lose interest before they get to the good things.
A harmonious design requires excellent organization. Your hero image content should have a logical hierarchy and flow so that each piece builds on the previous one. This is incredibly important for pairing images with copies.
When a relevant image is paired with information, people can remember 65% of the information three days later. But only 10% are remembered through information alone. Make sure your message is clear and connects to your images. It helps to set up a simple wireframe to organize your hero picture on the page.
Stock photos are a core part of content marketing, but they can do more harm than help when it comes to hero images. While 40% of content marketers said that original graphics helped them achieve their marketing goals, only 13% of content marketers said the same about stock photos.
You can let your creativity run wild by creating original hero images with Canva or by taking inspiration from Behance. Are you missing high quality photos? Search Unsplash or Pexels for a variety of high quality photos that can be used for commercial and non-commercial purposes.
The biggest battle for great graphics? 43% of marketers say it consistently produces them. To keep to a tight schedule, take the time and resources it takes to create visuals – and even add them to your marketing budget.
If you are pressed for time, consider revising your old graphics. It’s a smart way to save time, and 51% of businesses have found it to be efficient and effective.
There’s nothing worse than landing on a website that looks like it was created in the dot-com bubble. It looks sketchy and you’re scared of clicking something in case it redirects you to a virus. On the other hand, when you are greeted by a beautiful hero picture, you want to stay and explore the site.
As the first point of contact people have with your brand, hero images have a huge impact on your brand perception, website traffic, and conversion. So it’s time to put your newfound knowledge into practice and design one that attracts people at first sight.