<img>
An image, with alternative text as a first-class requirement.
Baseline: Widely available · Media & embedded content
When to use it
Always with alt (describing function in context, or alt='' when purely decorative), intrinsic width/height to prevent layout shift, and loading='lazy' below the fold.
When not to
Never lazy-load the hero/LCP image, and never put text in images without mirroring it in alt.
Key attributes
src / srcset / sizes- sources and responsive selection
alt- alternative text (required)
width / height- intrinsic size
loading- lazy or eager
decoding- async
fetchpriority- high for the LCP image
Example
<img src='/img/loaf.jpg' alt='A dark rye loaf on a board' width='320' height='200' loading='lazy' decoding='async'>