Lazy Load hero Image

The Hero Set widget is ideal for an image which appears in the viewport on page load and is very efficient since it loads a different size of image for each device type.
This widget can be used in the same situation but comes into its own when used to insert hero images further down the page. Not only does it load the appropriate size of image for the device type but also defers the loading of images outside of the viewport until the rest of the content has downloaded.
Images
The images used in this demo were cropped to 1600px, 1200px and 800px wide before importing into EverWeb. This size range should give good image quality in most situations.
The image has a field for alt text and a control for setting the fixed height.
Overlay
The overlay is optional and consists of a heading, text and a CTA style link which are centered both horizontally and vertically. As shown in the example below, the overlay can have a background with adjustable opacity.
The heading has quite a few styling options including a text shadow and letter spacing. The font can be web safe or non web safe or Google hosted with a web safe fallback.
The text has separate controls for size and color, can be aligned left or center and has a line height control.
The link is configured to open internal pages and has controls for font size, color, hover color, background color and opacity and border width.
There is a control for vertically spacing the heading, text and link.
The image itself can have vertical spacing applied to the top and bottom.