Fallback image is loading instead of picture source srcset
- smallest image is being loaded instead of largest picture source
- picture element behaving unexpectedly
- debugging picture element behavior
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).
- absolutely positioned picture always loads smallest image
But that doesn’t seem to be a thing either.
Halp?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
https://cloudinary.com/blog/for_developers_the_html_picture_element_explained
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:
https://git.drupalcode.org/project/bulma/-/commit/2966e12e3f9a21b7139d75c32d548ec143406f8f