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.
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="" />
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.
picture elementA 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>
optimumxAll 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}&quality={quality}"
data-quality="75"
data-optimumx="1.5"
class="lazyload"
alt="" />
picture elementA 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