lazySizes - RIaS plugin

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>

<img
	src="http://placehold.it/100"
	data-src="http://placehold.it/{width}"
	data-sizes="auto"
	class="lazyload"
	alt="" />

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/>

<img
	src="http://placehold.it/200x100"
	data-src="http://placehold.it/{width}x{height}"
	data-sizes="auto"
	class="lazyload rectangle"
	alt="" />

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]-->
<img
		src="http://placehold.it/100"
		data-src="http://placehold.it/{width}"
		data-sizes="auto"
		class="lazyload"
		alt="" />
</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.

<img
	data-src="image?width={width}&amp;quality={quality}"
	data-quality="75"
	data-optimumx="1.5"
	class="lazyload"
	alt="" />