Art direction with `<picture>`

A different crop for a narrow screen

Mount Hood, snow-covered, rising above a dark evergreen forest and reflected in a still lake. — Wide viewport: the whole scene, 3:2. Narrow viewport: the square crop on the peak. Resize the window across 36rem (576 CSS px at the default 16px text size) to switch. Photograph: Lake Mountain Landscape, Bonnie Moreland, CC0.

A different image for dark mode

Bar chart of trail visits by month, sample data: about 40 in January, rising to a peak of 98 in July, then falling to 44 in December. — Switch your system between light and dark: the browser re-evaluates the media conditions and swaps the file. (In DevTools: Rendering, then Emulate CSS media feature prefers-color-scheme.)