Ultimate guide to hero pictures [Best Practices + Examples]

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.

How to create an HTML structure for hero imagesImage source

hero-image-html-structure Image source

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.

How to personalize your hero picture with HTML

Image source

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

Leave a Reply

Your email address will not be published. Required fields are marked *