html/picture-img

Why

<picture> only chooses a file; the <img> inside it is the element that is displayed, has the accessible name and reserves the space. A picture with sources and no img shows nothing in any browser, and screen readers announce nothing.

Fix

Put an <img> last inside the picture with the fallback src, the alt, width and height; <source type="image/avif"> and <source media="…"> before it offer the alternatives.

Examples

<!-- bad -->
<picture><source type="image/avif" srcset="hero.avif"></picture>
<!-- good -->
<picture>
  <source type="image/avif" srcset="hero.avif">
  <img src="hero.jpg" alt="Autumn collection" width="1600" height="900">
</picture>

Sources

• HTML Standard, the picture element
• MDN, the picture element

Read it in the terminal

npx github:dawidolko/frontend-skills explain html/picture-img