Don’t: duplicate markup by breakpoint
Desktop image + mobile imageTwo elements, two alt attributes
<img class="desktop" src="wide.jpg" alt="Team reviewing a prototype">
<img class="mobile" src="crop.jpg" alt="Team reviewing a prototype">Prerequisite: Write alt text for the image’s purpose.
The principle
Responsive image principle
Use one <img> as the semantic image. Candidate sources choose pixels; the alt on that image communicates purpose.
Do / Don’t
One image in the accessibility tree.
Duplicating desktop and mobile images and hiding one with CSS can expose repeated alternatives when styles fail, create confusing reading order, and waste downloads.
Do: let the browser choose a source
One semantic imageMany candidate files, one alternative
<img src="team-800.jpg" srcset="team-400.jpg 400w, team-800.jpg 800w" sizes="(min-width: 50rem) 50vw, 100vw" alt="Team reviewing a prototype">Choose the mechanism
Resolution or art direction?
Both patterns end in one <img>. The difference is whether candidates show the same composition or intentionally use different crops.
srcset + sizes
Use width or density candidates when the content and crop stay the same. The browser selects an efficient resource.
<picture> + <source>
Use art direction when a smaller viewport needs a meaningful crop. Put the only alt on the fallback <img>, not on <source>.
picture→source candidates→one img + one alt
Art direction
Crops may change; purpose should not.
<picture>
<source media="(max-width: 40rem)" srcset="team-close.jpg">
<source media="(min-width: 40.01rem)" srcset="team-wide.jpg">
<img src="team-wide.jpg" alt="Team reviewing a prototype">
</picture>- Confirm every crop still supports the same alternative and page purpose.
- If art direction changes the meaning, reconsider whether these are really candidates for one image.
- Keep decorative responsive imagery silent with
alt=""on the single image. - Test image failure, narrow and wide layouts, zoom, and screen-reader reading order.