Inserting Hero Images

A hero image is almost obligatory on a website's hone page. It fills the browser width and has a fixed height so the image file must be quite large to give reasonable quality when viewwed at wide browser widths on a computer.
The problem is that an image of that size is far too large for mobile users to download over a wireless network. Apart from the time it will take to download, it will also eat into the visitir's data allowance.
Images
The HTML5 <picture> element was designed to allow us to insert different sizes of images for the various devices. In this case threee images are used.
The images in this demo were cropped to 1600px (251KB), 100px (128KB) and 600px (51KB) wide respectiverly before importing into EverWeb. Note that the image for small tablet and mobile phone users is only one fifth the size of the large image.
Images can be resized quickly using the Tools menu in Preview.app.
Height
The image height can be set in pixels or expanded to fill the browser/device window by checking a box. The image becomes full height when viewed on mobile phones in portrait mode.
Overlay
The overlay has a grid layout with two columns so that the text block can be inserted left, center or right The overlay background color has an opacity slider.
Text
The text block is an HTML5 <article> element with a heading, text and an optional link. The link can open internal or external pages and has a new window option.
Animation
The overlay can animated in. The animation is "fade in" and there are controls to set the animatio time and delay in seconds.