New Image Attributes Can Kill the Jank
Jen Simmons walks through a common page-load headache in the video below: image-induced layout shift. Before the image asset finishes downloading, the img element naturally reports a height of 0. The browser then repaints the page once the file arrives, shoving all the surrounding content around. It is a problem seen constantly on large news sites.
Her recommended fix is to declare height and width attributes on the image markup:
<img src="dog.png" height="400" width="1000" alt="A cool dog" />The trick works because Firefox and Chrome now factor those attribute values into the initial layout, eliminating jank before the image is fully loaded—even when a CSS rule overrides those values with a fluid width and, by extension, an unknown rendered height. Content stays put regardless of whether the image has arrived. In past projects, images were often placed lower on the page purely to dodge this kind of shifting; this approach straightforwardly removes that need.
