v155 · jpeg xl

Serving it safely

A new image format is only shippable if the browsers that cannot read it never see it. <picture> does that — as long as you write it correctly. Each case below is live; the readout is which file the browser actually chose, read from currentSrc.

Four ways to offer a JXL

the rule

<source type> is a promise about the bytes, and the browser trusts it: it picks the first <source> whose type it can decode and never looks at the rest. Get the type wrong, or leave it off, and the fallback cannot fire — the browser has no way to know the file is unreadable until it has already committed to it.

The <img> inside <picture> is not a fallback for a failed decode; it is the last candidate in the list. There is no "try the next one" after a decode error, which is why the type attribute carries all the weight.

see also