The Lazy Load widget described elsewhere in this section is used for inserting an image on its own. If several images need to be stacked vertically - with options for captions, descriptions and links - this widget will do the job quickly and efficiently. It can accommodate up to 48 images with a smaller version for mobile users and, of course, lazy loading.
Lazy loading means that images are not download until they are about to be scrolled into view. This allows the web page to download much faster when there are more than a couple of images on the page.
Lazy LoadingThe widget inserts the image in two sizes - one for computer users and another smaller one for mobile visitors. The large image should be reduced to the maximum width setting and the small one to about half that size before importing into EverWeb. The images in this demo are 1200px and 600px wide respectively.
WebP ImagesThe images are switched from one size to another depending on browser/device width. This is achieved using the <picture> element which allows images to be inserted in two or more sizes.
Picture InfoIf an image doesn't have alt text the search engines can't index it. It also helps both the search engines and the visitors if the image is inserted in an HTML% <figure> element with a descriptive caption in the <figcaption>.
Text Over ImageThe optional CTA (Call To Action) style links can be configured to open internal or external pages and in a new window if required.
Follow the link to find out about relative and absolute file paths.
Vertical scrolling is very familiar to visitors using any type of device and can be a much better way to display images than using an inefficient file heavy slideshow.
Check out the horizontal slide scroller as another alternative to using a slideshow.
