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

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

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