I think page jumping is one of the worst UX/performance problems on the web. One culprit of this is images with undefined
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 was as easy as adding
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
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