- What is the main purpose of a hero image?
- What makes a good hero image?
- What size should a hero image be on a website?
- What is a hero image of a video?
What is the main purpose of a hero image?
A hero image is a website design term used to describe an oversized banner image at the top of a website. Sometimes called a “hero header”, it serves as a user's first glimpse of your company and offering because of its prominent placement towards the top of a webpage that usually extends full-width.
What makes a good hero image?
The most obvious choice for a hero image might be a visual that depicts a product or service offered. But thinking outside the box can also make for a more intriguing design — and if the brand behind your website doesn't sell something tangible, you'll need to get more creative with your image choice.
What size should a hero image be on a website?
The ideal size for a full-screen hero image is 1,200 pixels wide with a 16:9 aspect ratio. For a banner hero image, the ideal size is 1600 x 500 pixels. If you need crystal-clear images, or your target audience browses on large screens, you may have to size up to 1,800 pixels.
What is a hero image of a video?
Wikipedia defines it as “a large banner image, prominently placed on a web page, generally in the front and centre.” The hero image can actually be a static pic or dynamic (videos and animations). It typically covers the full width of the webpage and is the most eye-catching introduction to your site.