Ugh yes. The element containing the image is literally the only thing that matters, tying the image to the screen size is pointless and often infuriating.
For those who don’t see this, imagine this scenario- You have a fluid 3 column layout. The layout has multiple break points. Inside one of those columns you have a grid of images which itself is fluid and has breakpoints, these breakpoints differ from the layout breakpoints. Now what should the srcset be on the individual images in the grid at a 1000px screen size? The answer is why the hell am I being forced to figure this out? The browser knows how wide the container will be around the individuals images, help us out here and use this value to determine what image should be selected in the srcset.
> The answer is why the hell am I being forced to figure this out?
Because the decision is made before CSS loads and is parsed, so the browser doesn’t know any of this.
Don’t get me wrong, this frustrates me endlessly as well, but the reasons for it are clear. Delaying until CSS has been parsed would slow down image loading.
If we can lazy-load the image until the image is in view, we can lazy-load until its container width has been determined. I get there’s reasoning for how things behave as they do, my point is really we’re in this position due to lack of foresight by WHATWG/W3C.
For those who don’t see this, imagine this scenario- You have a fluid 3 column layout. The layout has multiple break points. Inside one of those columns you have a grid of images which itself is fluid and has breakpoints, these breakpoints differ from the layout breakpoints. Now what should the srcset be on the individual images in the grid at a 1000px screen size? The answer is why the hell am I being forced to figure this out? The browser knows how wide the container will be around the individuals images, help us out here and use this value to determine what image should be selected in the srcset.