html/picture-img

Dlaczego

<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.

Poprawka

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.

Przykłady

<!-- 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>

Źródła

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

Przeczytaj w terminalu

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