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 simplest way to ensure the browser knows how much space to allocate for an image is simply to define its
<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
width, we specify the relative size of only one property and leave the other one either blank or to set it to
<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
aspect-ratio available to use, neither is ready quite yet. There’s also the common practice of using a combination of
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
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
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
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.
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.
Jen Simmons also has a video on this new behavior that provides a helpful overview.
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:
heightattributes to images.
- Adjusting any related CSS to ensure that the correct properties are set to
auto. For instance, if the
widthis set to
100%, set the
autoto 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
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.