Control over initial image rendering

Hi,

If someone is on a slow internet connection, and the page they are loading/reading includes an image, the layout of the page will often shift when the image starts to load (aka page reflow).

This is often due to the image being set to a percentage based `width` in CSS, and the height being set to `auto` - so the browser has to wait for the image to start downloading to calculate the size of the image.

However, web developers can provide width/height attributes in the HTML as well, and while CSS overrides these values when rendering, the browser could use the HTML attributes to do an initial height calculation.

As a work around, web developers currently use solutions like the following to avoid page reflow:

https://www.codecaptain.io/blog/web-development/responsive-images-and-preventing-page-reflow/474 <https://www.codecaptain.io/blog/web-development/responsive-images-and-preventing-page-reflow/474>

https://stackoverflow.com/questions/16850988/responsive-design-image-how-to-set-width-height-to-avoid-reflow-on-image-load <https://stackoverflow.com/questions/16850988/responsive-design-image-how-to-set-width-height-to-avoid-reflow-on-image-load>

https://stackoverflow.com/questions/45869454/responsive-img-without-reflow <https://stackoverflow.com/questions/45869454/responsive-img-without-reflow>

It should also be noted that Firefox will show the alt text while the image is loading; and while I'm more focused on the image changing size, some developers find the alt text is also a problem while the page is loading (I've met some who would leave the alt attribute blank because of it - which is annoying, because it's very important).

---

This is following on from a brief discussion with Tantek about the loading of images in browsers:

https://bugzilla.mozilla.org/show_bug.cgi?id=1424247 <https://bugzilla.mozilla.org/show_bug.cgi?id=1424247>

Where they also suggested these resources as being useful:

https://www.w3.org/TR/NOTE-CSS-potential#id20550108161 <https://www.w3.org/TR/NOTE-CSS-potential#id20550108161>

https://www.w3.org/Style/Group/1998/09/progrend-19980930.html <https://www.w3.org/Style/Group/1998/09/progrend-19980930.html>

And here are the bug reports for Chrome and Safari:

https://crbug.com/732794 <https://crbug.com/732794>

https://bugs.webkit.org/show_bug.cgi?id=180580 <https://bugs.webkit.org/show_bug.cgi?id=180580>

Craig