August 23, 2019
The Pros and Cons of Websites Designed with Full-Screen Hero Images
Author
Chris Tremoglie
Minute
Read
Articles & Insights
Updated August 23, 2019
Over the past several years, we have seen a huge increase in the number of websites designed with large, full-screen banner images. Whether you call them “hero” images or the more traditional “banner” images, the design principles remain the same.
First things first: What is a hero image?
Basically, a website hero image fills the screen or a large portion of the screen with an image. It’s typically a background image with type and/or other design elements in the foreground.
Hero images have become popular for many reasons. A hero image serves as a powerful dominant element to work in conjunction with the main headline and communicate the primary message quickly. There are numerous studies documenting the effectiveness of hero images in comparison to outdated rotating carousel banner images:
- Don’t Use Image Carousels or Sliders
- Oversized Hero & Background Images: Unfounded Fad or Conversion Booster?
In addition, it has been well documented that average users are willing to scroll down the page to find additional content and often prefer scrolling to clicking:
Combined with long-scroll pages, full-screen hero banners make for great storytelling opportunities and allow your brand message and unique selling proposition to be communicated in an engaging and interactive way. The days of cramming all the content “above the fold” are over. Whew!
Full screen hero images sound awesome, what could go wrong?
While we are huge fans of this design movement, we’ve noticed that our clients are often confused by the way images scale and crop, as well as what information can be “sticky” to remain on the screen at all times. The short answer is, there’s more than one way to skin a cat. No one answer works for every situation.
Instead, here is a list of the most common pitfalls relating to website hero images and our recommended solutions that will help you out:
Image Cropping
The most common issue we face is the inevitable cropping that occurs with full-screen hero images. As images scale horizontally to fill the screen, they must also scale vertically or else the images would appear stretched or pinched, depending on the aspect ratio of the screen. Some users browse the Web with their browsers maximized. Personally, I tend to browse with my window in a vertical shape along the left-hand side of my screen. Sure, to each his own. But we need to recognize that different preferences exist to accommodate accordingly.
Once you take all variables into consideration, you’ll see there are an infinite number of aspect ratios. A full-screen hero image must scale to fill them all. Inevitably, some image cropping is going to occur.
This is often a hard concept for some to understand, so we’ve found the following analogy quite useful.
Imagine you had a 4×6 photo print that you wanted to scale up to fit a 5×7 photo frame. Unfortunately, the proportions don’t quite work out. You’d need to scale the shortest edge up to fit, then crop off any leftover from the longer edge. While this could be a great way to crop out photo bombers, you run the risk of cutting out Grandma from the family portrait.
So what’s the solution? There are several, and the “right” answer ultimately depends on what you hope to accomplish with your site design. Consider these tips:
Avoid tightly cropped source photos.
This will allow the necessary scaling to take place without cropping out any key elements. Our work with National Philanthropic Trust offers a good example of how choice photography can prevent any strange, unfortunate cropping.
Change the point from which the scaling occurs.
Typically, we’ll scale from the center of the photo so both the top and bottom of the photo may be subject to a bit of cropping. However, when working with photos of people, for example, we are careful not to crop off the heads of the subjects. In that case, we’d fix the top of the photo with only the bottom of the photo subject to cropping.
Use fixed-width images.
If all else fails and any form of cropping is a definite “no”, then you can simply create fixed-width images that don’t scale.
File Size
By default, the ideal website hero image size for full-screen background images is 1,200 pixels wide. However, if users are browsing on larger screens, these images need to scale up to fill the screen. This can often introduce some blur into the image. If the image is just a background image, this blur is often acceptable – even desirable. But if the image is a foreground image, or contains vital elements that must be sharp, we will often create larger source images in the range of 1,800 pixels or so. The upside? Sharper images. The downside? Larger files which lead to longer load times.
It’s best practice to review your Google Analytics to determine the screen resolution of your typical visitors and appropriately select the optimal image size with your target market in mind (one of the core ideas behind data driven design). For one of our recent web projects, the key stakeholder was using a large 27” display with the browser maximized, resulting in over 2,500 pixels of resolution. The full-screen images were for a portfolio, thus needed to be tack sharp. Ultimately, we uploaded source images that measured a whopping 2,500 pixels across. Even though we heavily optimized the JPGs, the resulting file sizes were quite large. Adding further complication, the hero image was actually a series of images set to automatically rotate with the banner area. The combined file sizes of all the images in the series ended up causing significant delays in page load performance.
Upon further research, we learned that the website’s target market often browsed the web at a more typical resolution in the 1,200-pixel range, yet all users were subject to the performance penalty caused by the oversized images. Moral of the story? A winning web design process designs with your target audience in mind.
Sticky Elements
By now, most users are familiar with “sticky” header navigation. As long-scroll pages have grown in popularity, sticky navigation has become a must-have feature. It allows users to interact with the website’s primary navigation, regardless of how far they have scrolled down the page. But when it comes to full-screen hero banners, we found it’s often useful to “stick” other elements along the base of the hero image to ensure certain key points are kept above the fold.
Proceed with caution, however. Depending on the size of the sticky element, it can limit the amount of screen real estate available and exacerbate any potential cropping issues. The site we built for Enliven planters is a good example of this careful balance of sticky elements.
Video
The use of video as a full-screen background element has become increasingly popular in the past year or two. In fact, we recently added a video background image to our own homepage. When used as a background element, videos should set a tone or mood, but lack overly-specific content, audio and/or voiceovers. A full-screen background video is typically 30 seconds long and is set to automatically loop.
Likewise, videos are often intentionally a bit dark and slightly blurry (or textured) to allow for other text or content to pop in the foreground. A full-screen background video is not an appropriate place for your corporate video, complete with soundtrack and talking heads. In fact, videos must be muted for both ADA compliance and to be supported by certain web browsers.
It’s also important to replace video with static images when on mobile devices. Not only is load time an issue, but users can grow upset if your site uses up a large chunk of their mobile data plans.
The Mobile Experience
Responsive design to the rescue! Most of this post focuses on how to scale images up to fit a variety of desktop browsers and screen resolutions. Given the rise of mobile browsing and new emerging mobile-first website editors like Gutenberg, it’s just as important to consider how large hero images can affect the mobile experience.
Sometimes, the hero image remains as a full-screen background image but now must fit a vertical orientation (phone) in addition to a horizontal orientation (tablet). Other times, the hero image retains its 16×9 ratio and becomes a more traditional “banner” image, while the headline moves beneath the image rather than on top. Again, there’s no right or wrong answer. But it’s key to consider all possible solutions during the planning phase of your project.
So, what’s next for full screen hero banners?
The next evolution of website hero banners is the WebGL banner. WebGL is an open source Javascript library capable of rendering 2D and 3D interactive objects in a variety of ways. Here is just one stellar example: 3 Dreams of Black
Think of these as shapes and graphics living in a full 3D space. Many design heavy, forward thinking websites are utilizing basic WebGL to create unique distinctive headers in lieu of a full website hero image. Not only is it visually appealing, but with the right creative team behind it, it can also be completely interactive.
However, like all good things, there is a cost. WebGL elements can be heavy on load time and are not friendly to screen readers. Also, since the technology is newer, it is not as widely supported by legacy browsers and mobile devices.
As you can see, something as seemingly simple as a scaling background image can actually be quite complex. We’ve found it important to have discussions regarding the pros and cons of scaling images early on in our process. This helps set expectations, clarify any potential pitfalls and point out the best solution well before we move into development.
