Do I need to include width and height attributes in the HTML for an <img> element, not just in the CSS?

Question

I have an <img> element and at the moment I am specifying explicit values for its width and height in the CSS with no such attributes in the (X)HTML. The PowerMapper tool complains about this, saying that the page layout will ”jump about“, which I take to mean that the page will be repainted with a different layout, unless explicit values are specified in the (X)HTML, and CSS doesn’t count.

Is this true? Is specifying values only in CSS not good enough, not enough to avoid a repaint?

I don’t really want to put attributes in my XHTML as I’d rather confine all presentational stuff to the CSS and keep content and presentation separate.

Answer 1

TLDR: If the ratio is fixed and you define it on css it's not mandatory to add it on xhtml.

Because the browser doesn't know the aspect ratio of an image before it loads, it cannot reserve space for it. To prevent layout shifts, you must define the width and height attributes.

If the ratio is fixed and never changes, an alternative is to define the aspect ratio in CSS, for example:

img {
  width: 100%;
  aspect-ratio: 4 / 3;
}

Or with fixed width and height

img {
  width: 400px
  height: 300px;
}