Hero images are a common design pattern, but the way you code them depends on your site’s content and needs. In this article, I’m going to cover some of the most common methods along with a list of pros and cons for each. If you’re not sure what a hero image is or want to know how they’re used, check out this article from Envato.
Background Images
Including your large hero image as a background-image in CSS lends to a lot of control, but it’s not without its fallbacks. Here’s a quick example:
See the Pen Hero Image: Background Image by Pralie (@praliedutzel) on CodePen.20669
On the plus side, it’s super easy to switch out the background image depending on the resolution, so you can serve up smaller images for smaller devices. If you’re doing this, I recommend writing the code to be mobile-first so small devices aren’t trying to pull your biggest file initially. You can also swap out different sized images, so if you want a landscape photo for desktop and a square photo for mobile, you can easily alter the CSS.
When using a background image instead of an actual image, you lose out on a couple of things. First off, you have to specify a height since there isn’t an image pushing the container open. You can do this with a percent or padding around the hero content, but I prefer to use vh units for smoother scaling. You might also run into some art direction issues depending on the background-size property you’re using. I tend to lean towards cover, which usually works out nicely but can sometimes cut off the bottom of the image depending on the viewport width and the height you specified. If you’re using a different property, like contain or 100%, you’ll end up with negative space above and below the image at resolutions where it doesn’t fill the height.
The biggest issue with using a background image is that your hero image might be important to the content, but by removing it from the markup, you’re removing that context. Background images should only be used for presentational purposes.
Image Tags
Instead of using a background-image, you can include the good old image tag in your markup, like so:
See the Pen Hero Images: Image Tag by Pralie (@praliedutzel) on CodePen.20669
This is great for when the image pertains to the content and isn’t purely presentational. It allows for smooth scaling in the viewport since it will always maintain the same aspect ratio, and you don’t need to specify any heights in your CSS.
On the downside, it’s not easy to swap out the image for different resolutions. There are a couple of ways to handle this:
- Include only the largest image and serve that to all resolutions
- Include multiple image tags and hide/show each based on the resolution
- Use responsive images to serve up different images based on your criteria
In the first option, you’re serving a giant image to users on small devices, which results in slower page load times on a mobile connection. In the second option, the browser will still download both assets but will only display one visually, which isn’t ideal either. The final option is your best bet, but the browser support isn’t across the board yet so you may need to use a polyfill.
Another issue with using the image tag is art direction. When scaling down the large image (if that’s the method you’re using), the hero area is going to get pretty small for narrow devices. This can make it difficult to tell what’s going on in the image, more so if you have text over the image. To help with this, you might want to position your text below the image for smaller resolutions, or look into using one of the other two methods noted above.
Best Practices
No matter which way you choose to build your hero images, there are some best practices you should still follow.
Background Color
White text is most commonly used over busy photography, which can be a problem as the page is loading. Since hero images tend to be very large, they can take a while to load, leaving users with temporarily invisible content. To circumvent this, include a darker background color on the containing div to ensure that users can still view your content as the page loads. It’s also a nice fallback in case your images don’t load or you don’t have an image for certain page types.
Heading Tags
Since the hero is generally the first content area on a site, it’s common to put that big, bold text in <h1> tags. But is the hero text really the most important headline on the page? Does it describe the content of the page, or is it purely presentational? If the headline doesn’t describe the content below, it probably shouldn’t be your <h1>. Style the text however you like, but try to keep your code semantic.
To Video or Not to Video?
Large background videos are another common trend seen in place of the image itself in hero areas, and while they might be visually appealing, there are a few considerations:
- Will the video play on page load or on click?
If the video plays on page load, you will see some issues on slower connections where the video appears choppy. It’s also not recommended to autoplay the video if it has sound. - Are you self-hosting the video, or are you hosting it via YouTube, Vimeo, etc.?
This answer affects how you would code in the video (HTML5 versus iframe) and the amount of control you have over it. - How large will the video be? Do you have a CDN to host it on?
You’re going to want to compress the video to reduce the file size and throw it up on a CDN to help reduce page load time.
I’m not going to tell you that you should or shouldn’t include a hero video, but hopefully you can take the above into consideration along with your site’s needs. If you’re still unsure, you might want to try A/B testing with your users to see if a video would work well or not.
Other Considerations
Either way you choose to build your hero images, keep in mind that hero images can cause performance issues. Be sure to optimize your images, and you might want to look into a lazy loading technique. If you have any other tips or suggestions, let me know!