Purpose and content model
Img embeds an image with a text alternative. Picture wraps an img and optional source elements so the browser can choose a suitable image resource based on media conditions or supported formats. Source also serves audio and video, where its meaning and attributes differ. Picture is a selection mechanism, not a replacement for the actual img.
Img and source are void elements. In picture, place source candidates before the required img fallback. The chosen resource is rendered through that img, so the image's alternative text and layout dimensions remain on img. All candidate images for one use should communicate the same intended meaning.
Syntax and working example
<img src="/images/garden-800.jpg"
srcset="/images/garden-400.jpg 400w, /images/garden-800.jpg 800w"
sizes="(max-width: 600px) 100vw, 600px" width="800" height="500"
alt="Raised vegetable beds beside a greenhouse.">Supported attributes and behavior
Img supports src, alt, srcset, sizes, width, height, loading, decoding, fetchpriority, crossorigin, referrerpolicy, usemap, and ismap where applicable. Picture itself uses globals. Picture source supports srcset, sizes, media, type, and dimensions in supported configurations. Width-descriptor srcset needs an accurate sizes description of the rendered slot; density descriptors such as 2x describe a different selection model. Do not mix the two descriptor styles in one source set.
Another practical pattern
<picture>
<source media="(max-width: 600px)" srcset="/images/portrait-crop.jpg">
<img src="/images/wide-garden.jpg" width="1200" height="600" alt="The garden entrance beside the greenhouse.">
</picture>Accessibility and browser notes
Describe the image's purpose in context, not every visible detail. Decorative images generally need alt="". Reserve layout space with dimensions and responsive CSS. Do not lazy-load an important above-the-fold image merely because loading=lazy exists. Image choice can vary with browser heuristics and connection conditions.
Common mistakes
Picture cannot fix an incorrect alternative text. Source inside picture uses srcset rather than media source's src. An oversized sizes estimate can cause unnecessarily large downloads. A missing alt and an intentionally empty alt communicate different things.
Verify your implementation
Resize the viewport and inspect img.currentSrc in developer tools. Verify every candidate URL, intrinsic width, and crop. Test with images disabled and a narrow connection profile. The sandboxed learning editor blocks remote images, so perform network-image checks in your own local project.
Standard status and sources
Standard; browser availability must be checked independently of specification status.