lazySizes - RIaS plugin

The Responsive Image as Service plugin enables lazySizes to generate the best suitable image source based on an URL pattern. It works with pre-build images (i.e. grunt-responsive-images) as also with any third party or self hosted REST like image API / image on demand service.

For a short but full API description go to the readme.md.

Basic RIaS implementation

Include the ls.rias plugin right after your lazysizes script, add the lazyload class as usual and the data-sizes="auto" attribute.

Inside of your data-src value include the {width} placeholder

<script src="../lazysizes.js"></script>
<script src="../plugins/rias/ls.rias.js"></script>

Aspect ratio

In addition, you can set the ascpect ratio of the image from CSS. You only need to set the custom CSS variable --ls-aspectratio on the img and add a {height} placeholder

<style>
		img.rectangle {
			--ls-aspectratio: 2;
		}
<style/>

Note that you can also set the aspect ratio via a data-aspectratio value on the img tag.

RIaS and Art direction using the picture element

A responsive image service can be also combined with the art direction approach using the HTML5 picture element:

<picture>
<!--[if IE 9]><audio><![endif]-->
<source
		data-src="http://placehold.it/{width}/1111ee/fff"
		media="(max-width: 500px)" />
	<source
			data-src="http://placehold.it/{width}/e8117f/fff"
			media="(max-width: 1090px)" />
	<source
			data-src="http://placehold.it/{width}/7D26CD/fff"
			media="(min-width: 1224px)" />

<!--[if IE 9]></audio><![endif]-->

</picture>

optimumx

All options can be controlled globally through the lazySizesConfig.rias object or by using data-* attributes.

The rias extension can also be combined with the optimumx extension. The optimumx feature helps you to constrain the maximum pixel density for an image.

RIaS and Art direction using the picture element

A responsive image service can be also combined with the art direction approach using the HTML5 picture element.

In this case, we simply use the cropping service