Lazy Sizes CraftCMS Macro

lazysizes.css

img[data-sizes="auto"] { display: block; width: 100%; }

.fadeBox .lazyload, .fadeBox .lazyloading {
	opacity: 0;
	-webkit-transition: opacity 400ms;
	-o-transition: opacity 400ms;
	transition: opacity 400ms;
}

.fadeBox img.lazyloaded {
	opacity: 1;
}

macro.twig

{#
for this to work you need:
- the imager Plugin for Craft CMS: https://github.com/aelvan/Imager-Craft
- Lazyload: https://github.com/aFarkas/lazysizes
- respimage: https://github.com/aFarkas/respimage
#}

{% macro lazyBasicImage(fieldParam) %}
	{% for asset in fieldParam %}
		{% set transformedImages = craft.imager.transformImage(asset,[{ width: 225 },{ width: 490 },{ width: 740 }]) %}
		<img alt="{{ asset.title }}"
			src="{{ transformedImages[1].url }}"
			srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
			data-sizes="auto"
			data-srcset="{{ craft.imager.srcset(transformedImages) }}"
			class="lazyload fadeBox">
	{% endfor %}
{% endmacro %}