Images without the Jump

You start to read an article and suddenly everything jumps because of an image. It's really annoying and we could blame slow internet connections, but we shouldn't!

The thing is, we can prevent this, everyone on a modern browser should be able to read an article without loosing focus due to layout shifts from an image.

Keep responsive rules that scales to different screen sizes

With a responsive images like the above, the browser doesn't know how much space the image should take up until its actually loaded. But if we in our css say something like: img { width: 600px; height: 600px; } the browser would know up front and can reserve space for it, but then it's no longer responsive and we want responsive images.

HTML

  
  
    img {
    width: 100%;
    height: auto;
}

Help the browser

Instead of setting a fixed size in the css we can provide information to the browser. By providing width and height attributes the browsers can calculate the aspect ratio and reserve space.

Add width and height attributes to your img tags

It doesn't even have to be the correct size as long as the aspect ratio is the same, if the image is 1400x800 we could tell the browser it's 140x80 or even 14x8.

HTML

  
  
    <img src="img.jpg" width="1400" height='800' alt='Some alt text'>

Simple example

Play around with the delay control below to simulate slow image load. Set width and height will add width and height attributes to the img tag.

When you start to read an interesting article

You should not have to loose focus because the lack of width and height attributes on img tags. This is such an easy fix and makes the UI more stable. This is also measured in Core Web Vitals through Cumulative Layout Shifts (CLS).