Hacker News Reader

Comment by splitbrain | Hacker News Reader

One thing that's annoying about responsive images is that the displays with highest density are built into the devices with the potentially shittiest bandwidth.

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.

View on HN

<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.

Or better yet, give client control over the reported media sizes, so they can ask for a lower quality but faster loading website if they want to.

Reply on news.ycombinator.com