picture element

Art direction: a different crop or composition at different viewport widths, which srcset cannot express because its candidates are meant to be the same image at different sizes.

Format fallback: a modern format offered first and an older one after it, so a client that cannot decode the first simply moves on.

Both are declarations in the markup, which makes them visible to anyone reading the page — unlike server-side negotiation, which is invisible.

The image element inside is not a fallback for old browsers alone: it is required, and it carries the alt text and the dimensions.

The browser evaluates sources in document order and takes the first whose media and type conditions it satisfies.

It does not compare candidates or pick the best one, so a widely supported format listed before a modern one means the modern one is never used.

Which is the most common implementation error: the sources are all correct and the ordering makes half of them unreachable.

The same applies to media conditions — a condition matching everything placed first makes every later source dead.

The rule is therefore narrowest and most preferred first, broadest last.

Alt text goes on the inner image element, once, because it describes the content rather than any particular source.

Width and height go on the inner image element too, so space is reserved before anything is fetched.

Each source may carry its own srcset and sizes, which is how art direction and resolution switching combine.

Loading and fetch priority attributes go on the inner image element, since they describe the fetch rather than the choice.

Putting alt text on a source is a no-op that looks correct, which is why it survives review.

Declaring formats in markup makes the available options visible and auditable, at the cost of more markup per image.

Server-side negotiation handles it centrally and silently, which scales better and fails invisibly when the pipeline stops negotiating.

Both are legitimate and they solve the same half of the problem; art direction has no server-side equivalent.

A site using an image service usually relies on negotiation and uses this element only for art direction, which is a sensible division.

The format really delivered is read from the response rather than from the file extension.

Adoption of modern formats is reported, alongside whether images are delivered through a dedicated image service.

Dimensions and aspect ratio are checked on the rendered image, which is where a mismatched art-direction crop shows up.

Which source a browser would select depends on its viewport and its format support, so what is observable is what this client received.