<img> srcset with resolution descriptor is supposed to consider network speed when making a decision to download from a set of resolutions.
There is a prefers-reduced-data media query draft [1] which addresses the issue. It doesn't actually check the bandwidth, though (although I believe there are options to put a mobile phone into "reduced data" mode below a certain bandwidth).
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
This!
But wasn't progressive JPEG and AVIF pretty much designed to alleviate this problem though? Webp does not seem to support progressive loading however.
Progressive formats still require the device and network to allocate the bandwidth appropriately, so you'd want required traffic reaching the device first, and then images. The problem is that in most cases everything is just thrown more or less at once towards the device and then latency and packet loss goes through the roof and nothing loads.
So on a image heavy site, I might deliver 3x sized images (which may several megabytes) to an top generation iPhone in the middle of nowhere (like rural Germany) on a Edge connection...
I wish there was a CSS media query that would also consider the current network connection.