Hero Image

The hero is so prevalent in web design that landing pages that don't have a hero item seem odd or out of date.
The hero image is the first visual element a visitor encounters on the site so it needs to be memorable
A hero image usually consists of an image, text and a CTA (call To Action) link but can also display a video or slideshow.
A well implemented hero must have the image inserted in three sizes for the various devices if it is to perform well in mobile browsers.
Action Hero
A hero will be more eyecatching and memorable if it has a design feature that separates it from the masses - in this case animation.
The image, caption and optional link can all animate in. Each one has controls for setting the animation type, time an delay. The animations can occur once or every time the item enters the viewport.
The use of animation is not encouraged for mobile phones but there is a checkbox to turn this on if required.
Images
The practice of inserting just one large image will seriously compromise the page performance in the browser - especially on mobile devices.
The hero images in this demo were sized to 1200 x 800px and 750 x 500px for computer and tablets and a mobile phone image with an aspect ratio of 9:16 at 304 × 540px.
Items
Note how this hero has all the items needing to show at page load - logo, website name call to action and contact info.

Hero Image

Overlay Nav & Toolbar