Fallback image is loading instead of picture source srcset

So i don’t know what’s going on because everyone else who reports a similar problem (with StackOverflow question titles like ‘responsive images srcset not working’ and ‘srcset - Responsive image loading wrong file’) is getting the largest image, instead of the smallest image like we are. (Some are explicit: ‘Why is my img element always loading the biggest image from srcset’.) No one is asking why the smallest, non-picture, image element <img> fallback is the one loading.

The only think i can think of is that we are absolutely positioning the image (to use it as a background image while still getting all the goodness of responsive images).

But that doesn’t seem to be a thing either.




Solution in our case

There was an image template adding a <figure> tag around the <img>, and this was breaking the responsive <picture> element.

See Support responsive images [#3396429] | Drupal.org and the fix: