Hero Image

A hero image, also called a banner or a hero header, is an image that’s displayed at the top of a page.

Hero images are typically large and may stretch across the full width of the page. They come in many styles — photographs, illustrations, digital art, and even videos — and can include design elements like text or buttons.

Because of its prominent size and placement, a hero image is likely to be the first element that the user notices. Thus, designers consider how the hero image can create an optimal first impression. The hero might be designed to spark curiosity, convey values, tell a story, or prompt the user to take action.

Resources

• “Hero Image” from Optimizely
• “Ultimate Guide to Hero Images” from Hubspot