Reserving aspect ratio for images

I think page jumping is one of the worst UX/performance problems on the
web. One culprit of this is images with undefined width and height
attributes—the browser doesn’t know how to lay them out until they have
been downloaded, thus the page jumps. The simple fix is to reserve space
for them in the page, but more often than not, this is not implemented. Try
scrolling down your Twitter timeline on twitter.com with a poor
connection—as images load above your reading position, the page will jump,
and you’ll have to try and find where you were reading again. This is
incredibly frustrating for the user.

Before responsive web design was a thing, reserving space for images while
they load was as easy as adding height and width attributes to your img.
Responsive websites rarely use fixed image sizes, so instead we want to
reserve a space with a given aspect ratio. This can be done using the
infamous “padding-bottom hack”. For example, for an image with an aspect
ratio of 4:3, we can reserve space for the image whilst it loads by
wrapping the image with an element whose padding-bottom is set to 75%
(width/height), and then absolutely positioning the img relative to this
wrapper:

<div style="padding-bottom: 75%; position: relative;">
    <img style="position: absolute; width: 100%;" src="foo.jpg" />
</div>

Looking at this, it’s no wonder authors rarely bother to reserve space for
images.

When rebuilding my photography blog, samefourchords.com, I wanted to use
the picture element for art direction, mainly to provide different crops to
landscape and portrait devices to increase their impact. I couldn’t do this
because, to my knowledge, there’s no way to reserve space for art directed
images. The “padding-bottom hack” won’t suffice for this use case, because
there is only one img inside the picture, but multiple sources.

How could the web platform make this easier for content authors? If we
could solve that problem, perhaps page jumping on the web will decrease.

One idea I had was to add an aspectratio attribute to the img element (e.g.
aspectratio="4:3"). Perhaps the source element could also receive an
aspectratio attribute, so browsers know how to lay out the img element.