When using this module with Responsive images, the generated picture tag is not sorting the source images properly.
So instead of using AVIF desktop image on desktop, it will use mobile version instead.
Imagine we have 3 breakpoints: mobile, narrow, wide.
The actual rendered picture element is sorted this way :
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 order:
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>
Needs review
1.3
Code