6 ms·
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.
by splitbrain 5y ago
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.
- tjchear 5y agoOr 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.
- Santosh83 5y ago<img> srcset with resolution descriptor is supposed to consider network speed when making a decision to download from a set of resolutions.
- Y-bar 5y agoThis! But wasn't progressive JPEG and AVIF pretty much designed to alleviate this problem though? Webp does not seem to support progressive loading however.
- Nextgrid 5y agoProgressive 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.
- darekkay 5y agoThere 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/prefers-reduced-data https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...