HTML5’s responsive image implementation provides a fantastic tool to address the performance issue of image-heavy websites. But there is a crucial feature that is still missing. Originally published at fabianstiehle.com . If you don’t know how responsive images work I recommend you read Eric Portis’ as I won’t go into the mechanics in detail. article on Smashing Magazine However, to remind you, a simple markup would look like this: In the current syntax, we define our 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: image 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 , the rest of the website is already rendered while the image is still loading. render-blocking 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: and . 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. width: 100%; height: auto; A responsive image with variable height in chrome. I marked the position of the image in red. Chrome sets the initial height to zero. The image pushes the text to the bottom once it’s loaded. There is . But it’s a rather heavy investment since it requires calculating the aspect ratio yourself and injecting it in the markup. a nifty trick to set the image height based on the container width and the aspect ratio HTML How could this be fixed? There are addressing this very . And it seems that an additional . discussions dating back to 2014 issue height-based value might be finally coming srcset="https://via.placeholder.com/150x100 150w 100h 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 . The more interest this issue receives the better. GitHub Originally published at fabianstiehle.com .
