Aspect ratio

For years the guidance was to omit width and height because a fixed pixel size fought with responsive CSS.

Browsers now compute an aspect ratio from those attributes and apply it alongside CSS sizing, so a fluid width and a declared ratio coexist.

Which means the attributes describe proportion rather than dimension, and the CSS still decides the rendered size.

So an image with width and height attributes and a CSS width of one hundred per cent scales fluidly and still reserves space correctly.

The advice to omit them predates that behaviour and is one of the most persistent pieces of outdated guidance in front-end work.

If the declared ratio differs from the file's own, the browser reserves the wrong shape and the layout shifts when the real dimensions arrive.

It can also distort the image, depending on how the CSS handles fitting.

The usual cause is a template declaring fixed dimensions for images that vary — a content system where editors upload whatever shape they have.

Which is why deriving the attributes from the file rather than hard-coding them in the template is the durable fix.

An aspect-ratio CSS property can declare the intended shape independently, with an object-fit rule deciding how a differently shaped file is handled.

It is one of the rendering measurements search engines report, and it corresponds to something readers genuinely experience.

An unexpected shift moves what someone was reading or about to tap, which is how a mis-tap becomes an accidental navigation.

Images are the most common cause, followed by advertisements, embedded content and web fonts changing metrics as they load.

The remedy is the same in every case: reserve the space before the content arrives, rather than letting it claim space on arrival.

An image whose dimensions are genuinely unknown until it loads, where a CSS ratio on the container is the answer.

A gallery of mixed shapes, where a fixed container ratio with object-fit gives a stable layout at the cost of cropping.

Embedded content in a frame, which has the same problem and no equivalent attributes — a container ratio is the only option.

Advertisements, where the slot should be sized before anything loads even though what loads is unpredictable.

Width and height attributes on images are checked, since their absence is the direct cause of the shift.

The declared ratio is compared with the intrinsic ratio of the file really served, which is what surfaces a mismatch.

The image inventory and the rendered dimensions are read together, which is also what identifies an oversized file.

Shift caused by fonts, frames or advertisements is a separate measurement and is not attributed to images.