Set width/height of image to avoid reflow on image load

Question

When I use image tags in html, I try to specify its width and height in the img tag, so that the browser will reserve the space for them even before the images

Answer 1

UPDATE 2: (Dec 2019)

Firefox and Chrome now deal with this by default. Simply add the width and height attributes as normal. See this blog post for more details.

---

UPDATE 1: (July 2018)

I found a much cleverer alternate version of this: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/. This still requires a wrapper element and it requires CSS custom properties, but I think it's much more elegant. Codepen example is here (credit to Chris Coyier's original).

---

ORIGINAL:

From this blog post by Jonathan Hollin: add the image's height and width as part of an inline style. This reserves space for the image, preventing reflow when the image loads, but it's also responsive.

HTML

CSS

figure {
  position: relative;
}

img {
  max-width: 100%;
  position: absolute;
}

The figure can be replaced with a div or any other container of your choice. This solution relies on CSS calc() which has pretty wide browser support.

Working Codepen can be seen here.