Images inserted in a responsive page design need to be available in a least two sizes and to lazy load if there are more than one or two of them.

This widget will display images at full width or centered with a maximum width. The images are made available in two sizes - one for wider screens and the other for mobile devices.
The HTML5 <picture> element is used to insert a larger image at 1200px wide and a mobile version about half that size.
The images have an optional fade in animation with the time set in milliseconds.

The widget uses a jQuery plugin to lazy load the images. This means that they are not downloaded until they are almost in the viewport. This is essential for page download efficiency and a "must have" feature for a page that will be viewed on mobile phones.
The images have a setting for the offset which is the number of pixels below the fold at which the image loads so that it is visible by the time it scrolls into view.

For an image to get indexed properly by the search engines it must have alt text, be inserted in an HTML5 <figure> element and have a visible caption inserted in the <figcaption> element. Better results will be obtained by including a text description with keywords to describe the image's purpose and content.

Each image has the option to include and HTML5 <article> element which has a caption, text and an optional link

The optional links are CTA (Call To Action) style and can either have a border or a contrasting solid background. The links will open internal or external pages and have a new window option.