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
I created MR for main branch, because there isn't up to date dev branch for version 1.3.X
Yeah, these are still out of order. They are indeed in the order AVIF, WEBP, and then JPG, but the breakpoint sources within those are all over the place.