Lazy loading is technique that defers loading of off-screen resources at page load time. Images that are not in the viewport at page load can be prevented from downloading until the visitor starts to scroll down the page.
The widget offers lazy loading as an option since any images that will be in the viewport when the page loads don;t need the function.
In addition to lazy loading, there is a checkbox to turn on the function to load a smaller image file for mobile devices. This is pretty much essentail if you have more than one or two images on a page.
The images used here were reduced to 1200px and 600px respectively before importing into EverWeb.
The container is an HTML5 <figure> element and can have a border and/or a box shadow.
The full width wrapper has controls for setting the background color and its opacity and for adding horizontal and vertical space which is required when a box shadow is added.
The <figure> element should be used to insert images since it has a <figcaption> element for inserting the caption. An image without alt text and a caption may as well not be there as far as the search engines are concerned. When a <figure> element is used, the search engines know that the text in the <figcaption> is related to the image.
The caption can be inserted below the image as shown in the first example or it can overlay the image as shown above, The overlay position can be top or bottom and there is a control to adjust iys position on th Y-axis.
The caption can use a web safe font or a non-web safe font or Google hosted font with a web safe fallback, There are controls for font size, color, padding and background color and its opacity.
When positioned below the image, the caption background control is not required since the exposed area containing the caption will have the color set by the control for the containerbackground.
Links
The <figure> element can be configured as a link to open internal or external pages and has a bew window option..
