Setting width and height attributes on <img> element on responsive images

Question

I understand that currently we are supposed to use width and height attributes on <img> elements again, mostly to avoid or minimize layout shift. And this works OK when I have images with the same set dimensions across all screen sizes.

But what do I do in the following situations:

• fluid width/height, possibly simply 100%, so full container width, and the container changes its dimensions based on screen size basic responsiveness)
• same, but with image itself having set dimensions but differing on breakpoints?

I tried searching for answers online, obviously, but in most cases I can only find articles convincing me how important it is to use these attributes, or, that this is a hassle now, but will be much easier once aspect-ratio is introduced and implemented in the browsers. So, not very useful so far.

In other words, let's say I have an image that is:

• 100% wide, height: auto on mobile breakpoint,
• 20rem x 12rem for medium resolutions,
• 40rem x 24rem for large resolutions,
• 60rem x 36rem for xlarge ones.

What would I put in the width="X" height="X" attributes?

Answer 1

Ok, so after quite extensive research and experimentation I've found out that, in truth, it doesn't really matter as long as the aspect ratio is preserved. So the best bet would probably be to use image's original dimensions.