Hero Image Switch To Responsive
The hero image has become the de facto item to have as an attention grabber - especially on the home page. Since a hero image has responsive width and a fixed height, it works really well when displayed on a computer but not so much on tablets and phones.
As the browser/device window width decreases, the image remains centered and the left and right sides of it begin to disappear.
This widget overcomes the problem by switching the image from a hero on computers to a fully responsive image on mobile devices.
If viewing this page on a computer, reduce the browser width to see the change.
It loads three different sizes of the image - one for each device type - so that the page will download faster on mobile devices than if only one image was used.
The images are inserted in an HTML5 <picture> element with media queries to change the file at the different browser/device widths. The widget includes a polyfill for ancient browsers that don't support the <picture> tag.
SEO
The main advantage of inserting the image using an <img> tag - rather than as the background of a div - is that it can have an alt attribute to insert keywords for the search engines.
The images are inserted in an HTML5 <figure> element. This allows the caption to be inserted via a <figcaption> element so that the search engines can related the text in the caption to the image.
Overlay
There is an option for a header overlay at the top and a caption at the bottom. These can animate in on page load if required using the controls for animation time and delay.