Proposal: fix page load speed vs. image quality trade-off, allow gradually higher resolution images and browser understanding of low bandwidth situation via CSS media query

[ell1e]

Problem statement: I sometimes talk to people from countries with rather limited internet speed, or also rather limited internet total traffic contingent available. I also often encounter myself on mobile data various websites that take way longer to load due to giant images. I think there should be a standard where the browser understands how to show low bandwidth placeholder images first.

Proposed solution:

<picture>
   <source media="(bandwidth: low)" srcset="desktop_lowres.png">
   <img src="desktop_highres.png" alt="A photo of London by night">
</picture>

There seems to be srcset for img elements, and sources for picture elements, but for now these seem bound to layouting needs and page sizes only, and not meant for bandwidth needs.

I assume one straightforward way to solve this problem would be:

1. add a media query with bandwidth: low and bandwidth: high for use in img srcsets and picture sources where an image can be provided in multiple versions depending on which version is intended for low bandwidth mode.

2. popularize some explicit low bandwidth mode or low data usage mode in browsers, in a way that actually makes it visible for average users and/or even suggests it automatically when on a connection with data metering.

In low bandwidth mode, the images might stay in low quality forever. In regular mode, browsers should perhaps be incentivized to load the low bandwidth versions of everything first (if available), and only load the high bandwidth versions once the page is fully layouted and shown and working.

This would also make proprietary page load accelerator proxies like the former Google Web Accelerator redundant, since a browser can now natively do the same work knowing where to get the small image versions.

(Sorry if I am proposing this in the entirely wrong section, or in a completely useless format, or if this doesn't really make any sense to do.)

[ell1e]

The mozilla documentation for picture even says this as an explicit intended use case:

Saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display.

But speeding up page load times isn't really possible without a major hit on the visible image quality on phone high DPI screens, unless it is possible to specify a low bandwidth set and a separate high bandwidth set like I'm proposing.

So I think this addition would benefit the intended use case of <picture> greatly.

[ell1e]

An additional note, progressive JPEG or PNG images that can be loaded progressively don't really address this, because this seems to only help to make individual images show up a bit earlier, but it doesn't seem to assist loading the entire page as a whole reliably earlier. These don't stop collectively at 50% loaded pixelated versions for example, until the entire page is ready, and only then complete loading collectively with the full versions.