Seems that aspect ratio is not calculated for every picture source and only taken from the img tag itself. This prevents the plugin to work in art direction mode with different aspect ratio.
img {
width:100%;
max-width:100%;
display:block;
}
.image{
max-width:100%;
margin:auto;
}
@media screen and (min-width: 550px) {
.image{
max-width:70%;
}
}
@media screen and (min-width: 800px) {
.image{
max-width:80%;
}
} <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/plugins/rias/ls.rias.min.js"></script>
<div class="image">
<picture>
<!--[if IE 9]><audio><![endif]-->
<source data-src="https://placehold.it/{width}x{height}/FF0000/fff"
media="(min-width: 800px)" data-aspectratio="1.3"/>
<source data-src="https://placehold.it/{width}x{height}/ff8c00/fff"
media="(min-width: 550px)" data-aspectratio="0.75"/>
<source
data-src="https://placehold.it/{width}x{height}/FFFF00/000000"
media="(min-width: 300px)" data-aspectratio="1" />
<!--[if IE 9]></audio><![endif]-->
<img
src="https://placehold.it/100"
data-src="https://placehold.it/{width}x{height}/CCCCCC/FF0000"
data-sizes="auto"
data-widths="[1000,800,600,500,400,300]"
class="lazyload"
data-aspectratio="0.666666"
alt="" />
</picture>
</div> Fiddle to see code in action: https://jsfiddle.net/roberthenniger/o6qzsh9m/
Wondering if this is expected behaviour or wrong configuration. The docs are not clear on how to use the data-aspectratio for responsive images in combination with widths calculation.
Checked the lazysizes doc and additional links like:
It also seems that lazysizes always chooses the 1000x width profile and is not calculating the size based on the actual width of the element.