The lazysizes lazy-loader
A weird little side-obsession of mine for a few years has been trying to imagine a
srcset or the
<picture> element on something like a set of images in a flex
container, where each individual image might not be the same size as the others,
depending on the way the flex is configured. (You can see the effect I’m talking about on
my overview page of courses that I teach.)
Obviously in a server-generated page of HTML, it would be easy to count the total number
of items, figure out the nth item at each viewport size that might be larger,
and insert the correct
sizes values for
It can automatically calculate the sizes attribute for your responsive images, it allows you to share media queries for your media attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple.
Hanging onto this for experimentation and at least a study in prior art.