Detailed answer
Picture supports art direction and format-based source selection.
Put source elements before the fallback img. The img supplies the actual image and alternative text. The browser chooses a matching source using media and type conditions; it does not display every source. Test the fallback as well as the preferred path.
Example
<picture><source media="(max-width:600px)" srcset="diagram-mobile.png"><img src="diagram-wide.png" alt="HTML document structure"></picture>
Understanding the behavior
Picture is useful for art direction or offering alternative formats with suitable fallbacks. The img remains the element that provides the image's alternative text and fallback source. A picture wrapper alone does not supply an accessible name.
Practical implementation notes
Test the matching media condition with a narrow and a wide viewport. Confirm that every crop still communicates the intended subject, and that the fallback remains usable when no source condition matches.
How to check it
Resize across the source media condition and inspect which resource is selected.
Expected result
The mobile composition is selected at the matching width and img remains the fallback.
Watch out: A picture element still needs its fallback img.
Read the reference ↗