In this article we continue to look at hero image design and in particular the relevancy of chosen images.
Relevant Images
Although it seems obvious, the issue of relevance is well-worth a discussion. The imagery you decide on for the hero image must be consistent with the website as well as the brand. This factor does not mean abstract imagery cannot work. As long as the imagery is consistent with your overall design and message, abstract imagery can be highly successful. Perhaps an abstract print that portrays a unique textural effect or an ocean of swirls that highlights your brand’s color palette might complement your overall concept.
Aside from being relevant, the best images are also high quality. If you settle for anything inferior to high-definition images, visitors will take notice, and it will have a negative impact on their perceptions of your product. In addition, your hero image does not have to be static. Many brands, such as fivefootsix spotlight animated hero images on their sites.
An animated version of a hero image could be a wise option for your brand if it is fun or whimsical. If you happen to be a creative company or an animator offering animation services, this hero image type is most likely an obvious choice. If you’re a videographer, or if videos are one of your products, a live video might be a perfect way to seduce more website visitors and increase the amount of time they stay.
However, there’s an issue that can cause problems with animated hero images.. Animation tends to slow down website loading times. This issue is concerning since slower-loading websites have significantly higher bounce rates and lower search engine rankings. On the other hand, the degree which animation might slow down your website depends on various factors. If you are able to minimize the reduction in speed, the benefits of using an animated hero image could outweigh the drawbacks.
One way to stop animation slowdowns on your page is by using CSS rather than using Javascript. By eliminating simultaneous animations and/or delaying it by a fraction of one second, you can also speed up your page. By using the second strategy, you’re gaining enough time for the remainder of the page to utilize the browser’s loading power without keeping visitors waiting. With GIF, you could also compress the file to optimize the page and the page load time.
