Use <picture> with an <img> fallback

A <picture> without an <img> fallback renders nothing in browsers that don't support <picture> (IE11) or don't support any of the <source> formats. The <img> child is also where alt, width, height, loading, and fetchpriority attributes live—these apply regardless of which source the browser selects.

Quick Reference

• Every <picture> must end with an <img> element—it is the required fallback and carries alt
• <source> elements are evaluated top-to-bottom; the first match wins
• Use type="image/avif" and type="image/webp" on <source> for format selection
• The <img src> should point to a JPEG or PNG—the universal fallback for all browsers

Check

Scan all <picture> elements in this codebase. Verify: 1) Every <picture> has an <img> as its last child (required fallback). 2) The <img> has an alt attribute. 3) The <img> has width and height attributes. 4) <source> elements appear before the <img> child. 5) Each <source> has either a srcset attribute or a media attribute. 6) format-selecting <source> elements have a type attribute (type="image/avif", type="image/webp"). Flag any <picture> missing an <img> …