Choosing the imagery for a hero image comes down to one deceptively simple word: relevance. The image must fit the website and the brand it fronts, and getting that right involves a few decisions worth thinking through properly. (For the full picture of what a hero image is and how to design one, see our hero image design guide.)
Relevance first
Although it seems obvious, relevance is well worth the discussion. The imagery you choose must be consistent with the website and the brand, which does not rule out abstract imagery. As long as it is consistent with your overall design and message, abstract can be highly successful, a textural print, or an ocean of swirls that showcases your brand’s palette, can complement the concept perfectly.
Alongside relevance sits quality, and it is non-negotiable. Settle for anything less than crisp, high-definition imagery and visitors will notice, and it quietly damages their perception of your product.
Animated heroes
A hero image does not have to be static. Brands with a playful or whimsical personality can suit an animated hero well, and if you are a creative company, an animator or a videographer, an animated or live-video hero is almost an obvious choice: it demonstrates the product while it decorates the page.
The catch is speed. Animation tends to slow page loading, and slower sites suffer measurably higher bounce rates and lower search rankings. How much it slows things down depends on the implementation, and there are ways to keep the cost low:
- Prefer CSS animation over JavaScript where possible
- Avoid simultaneous animations, or delay the animation by a fraction of a second so the rest of the page can use the browser’s loading power first
- If you use a GIF, compress it properly
Minimise the slowdown and the benefits of an animated hero can comfortably outweigh the drawbacks. Get the balance wrong and the most beautiful hero on the web will be judged by its loading spinner, our web design team spends a lot of time making sure that never happens.
