Brad Frost combined <picture> and the prefers-reduced-motion media query to achieve delightfully simple and effective results. I immediately imagined the possibilites of using media queries that don't relate to the viewport size.
Dark mode imagery
Why not use some other media queries in
<picture> <source srcset="dark.jpg" media="(prefers-color-scheme: dark)"> <img src="original.jpg"> </picture>
Let's see it in action:
Try it using your OS preferences for dark mode!
I applied some really minimal dark-mode CSS to this page to help visualize the effect. Maybe having this post public will give me the motivation to clean it up and make it site-wide 😜
The WebKit blog has a similar example in their introductory post on dark mode support.