In the current syntax, we define our image constraints in width only. This is mostly fine since most layouts are constrained by the width of the website or the width of the device. In fact, this is how we have done responsive images in CSS:

img{width: 100%;height: auto;}

But wait, wasn’t there a good reason to define an absolute height of an image? Yes! It all comes down to the rendering of the webpage. When a browser loads an image it doesn’t yet know the dimensions of it. In many cases however, since images are not render-blocking, the rest of the website is already rendered while the image is still loading.

A normal none responsive image with fixed width and height and a grey background set via CSS. The image is not yet loaded.

At this stage, the browser knows two things about the image: width: 100%; and height: auto;. The width can be calculated by the browser since it is aware of the width of the parent container. The height, however, is relative to the aspect ratio of the image which the browser can only learn once the image is loaded. For now, the browser has to guess the height and it always gets it wrong. (Firefox guess is square format, while chrome sets the initial height to 0px). Once the browser learns the actual height of the image it has to redraw it. This redraw usually forces a bunch of other elements to be redrawn as well. You may have noticed this on bad news sites, you're already reading an article and suddenly all the text starts to jump around.

A responsive image with variable height in chrome. Chrome sets the initial height to zero.

But will this solve the aspect ratio issue which we just discussed? We will have to see. If you want to help move things along you could check out the discussion on GitHub. The more interest this issue receives the better.