Oliver Joseph Ash

Full-stack web developer

Page jumping caused by 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 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.