Have you ever started browsing a web page, only to have the layout shift around as the images load? This can be disorienting, not to mention annoying—especially if you’re in the middle of reading some text. Typically this happens because the browser doesn’t know how much space in the layout to reserve for the images before they load. So when they do load, if the browser hasn’t allocated the correct amount of space, it will have to update the layout accordingly.

There are a few ways to get around this, but the good news is that both Firefox and Chrome are currently in the process of delivering a browser-based solution to this issue that will make it easier to keep image loading jank-free.

The Issue

The simplest way to ensure the browser knows how much space to allocate for an image is simply to define its width and height.

<img src="image.jpg" width="600" height="400" alt="">

When the image loads, the browser won’t have to recalculate the layout because it already blocked out the necessary space for that size of image. This approach is what developers did for quite a while. But then Responsive Web Design happened.

The problem with giving an image exact dimensions is that in many cases we may not want an image to be an exact size—we want it to adjust to the size of the screen or parent container while maintaining the correct aspect ratio. So instead of a fixed height and width, we specify the relative size of only one property and leave the other one either blank or to set it to auto.

<img src="image.jpg" style="width:100%; height:auto;" alt="">

This allows the image to both grow or shrink appropriately, which is good. It also allows the image to keep its intrinsic aspect ratio while doing so. This is also good. The problem is what happens while that image is loading.

While loading an image, if its height is set to auto, the browser doesn’t know exactly how much space in the layout to allocate for it. It has the width but will have to wait until the image loads to figure out the height. And when it does, it will also have to recalculate the layout of the page. And if you have multiple images on the page—especially if there’s text around or between them—you can get quite a janky loading experience as the images arrive. This is especially evident on slower networks.

A New, Non-Hacky Solution

So how do we deal with this issue? Although someday we may have intrinsicsize or aspect-ratio available to use, neither is ready quite yet. There’s also the common practice of using a combination of padding and padding:absolute to keep elements at a specific aspect ratio, although this approach, and all of its variations, are usually considered rather “hacky”.

Thankfully Firefox and Chrome are getting ready to ship a solution that doesn’t require new attributes or properties or hacky workarounds. Instead, these browsers will soon be using the specified height and width of the image to calculate the intrinsic aspect ratio of the image. And then, most importantly, use that aspect ratio to decide how much space to block out for the image when rendering the page. So we’ll be able to use the width and height attributes of the <img> tag to let the browser know the aspect ratio AND continue to use CSS to make a responsively-sized image.

<img src="image.jpg" width="600" height="400" style="width:100%; height:auto;" alt="" >

In this example, instead of blocking out 0px for the height while the image is loading (as is the case now), the browser will block out the correct height based on the 600x400 aspect ratio of the image, and its calculated width (in this case, whatever 100% is in the image’s context).

The main benefit of this update is it will help us more easily prevent layout jank when the images are loading. The height and width will become hints that the browser will use to accurately prepare the layout before the images arrive. And this, in turn, will create a better experience for the user.

Demo

Here’s a quick demo of how this could work. To have a better feel for what it would be like if the images took a little while to load, I’m using https://deelay.me/ to delay the image requests by 2 seconds.

Note: As of now, only Firefox Developer Edition (and Nightly) has implemented this new behavior. You can use it to see the new behavior and compare it to how other browsers lay out the page while the images are loading.

See the Pen Calculated Aspect Ratio by Shawn Maust (@afasterweb) on CodePen.

Jen Simmons also has a video on this new behavior that provides a helpful overview.

Next Steps

Currently only Firefox Developer Edition (and Nightly) has it available for testing, but that will be soon changing. Jen Simmons just announced that it would be shipping in Firefox this December. And according to Addy Osmani, Chrome is also working on implementing this same behavior. So pretty soon it will be fairly common.

In the meanwhile, we can still go ahead and get our sites prepped for the update. The main action steps would include:

  • Adding width and height attributes to images.
  • Adjusting any related CSS to ensure that the correct properties are set to auto. For instance, if the width is set to 100%, set the height to auto to ensure it keeps the right proportion.

The convenient thing about this forthcoming update is that the browsers will be using existing attributes—just the standard width and height. By making sure those attributes have appropriate values, we can keep using responsively-sized images and minimize layout jank while the images are loaded, all without resorting to hacky, but common, workarounds.