When using this module with Responsive images, the generated picture tag is not sorting the source images properly.
So instead of using AVIF wide image on desktop, it will use mobile version instead.
Imagine we have 3 breakpoints: mobile, narrow, wide.
The actual rendered picture element will be :
1. AVIF mobile > narrow > wide // Reversed
2. WEBP mobile > narrow > wide // Reversed
3. JPEG wide > narrow > mobile // Correct
<picture>
<source srcset="/files/styles/mobile_x1_560px/img.jpg.avif 1x" media="(min-width: 0px)">
<source srcset="/files/styles/narrow_x1_850px/img.jpg.avi 1x" media="all and (min-width: 560px)">
<source srcset="/files/styles/wide_x1_1024px/img.jpg.avif 1x" media="all and (min-width: 851px)">
<source srcset="/files/styles/mobile_x1_560px/img.jpg.webp 1x" media="(min-width: 0px)">
<source srcset="/files/styles/narrow_x1_850px/img.jpg.webp 1x" media="all and (min-width: 560px) and (max-width: 850px)">
<source srcset="/files/styles/wide_x1_1024px/img.jpg.webp 1x" media="all and (min-width: 851px)">
<source srcset="/files/styles/wide_x1_1024px/img.jpg 1x" media="all and (min-width: 851px)">
<source srcset="/files/styles/narrow_x1_850px/img.jpg 1x" media="all and (min-width: 560px) and (max-width: 850px)">
<source srcset="/files/styles/mobile_x1_560px/img.jpg 1x" media="(min-width: 0px)">
<img loading="lazy" src="/files/styles/mobile_x1_560px/img.jpg" width="560" height="153" alt="Hero">
</picture>
But we would like to have this output:
1. AVIF wide > narrow > mobile
2. WEBP wide > narrow > mobile
3. JPEG wide > narrow > mobile
<picture>
<source srcset="/files/styles/wide_x1_1024px/img.jpg.avif 1x" media="all and (min-width: 851px)">
<source srcset="/files/styles/narrow_x1_850px/img.jpg.avi 1x" media="all and (min-width: 560px)">
<source srcset="/files/styles/mobile_x1_560px/img.jpg.avif 1x" media="(min-width: 0px)">
<source srcset="/files/styles/wide_x1_1024px/img.jpg.webp 1x" media="all and (min-width: 851px)">
<source srcset="/files/styles/narrow_x1_850px/img.jpg.webp 1x" media="all and (min-width: 560px) and (max-width: 850px)">
<source srcset="/files/styles/mobile_x1_560px/img.jpg.webp 1x" media="(min-width: 0px)">
<source srcset="/files/styles/wide_x1_1024px/img.jpg 1x" media="all and (min-width: 851px)">
<source srcset="/files/styles/narrow_x1_850px/img.jpg 1x" media="all and (min-width: 560px) and (max-width: 850px)">
<source srcset="/files/styles/mobile_x1_560px/img.jpg 1x" media="(min-width: 0px)">
<img loading="lazy" src="/files/styles/mobile_x1_560px/img.jpg" width="560" height="153" alt="Hero">
</picture>
Active
1.3
Code