srcset:
<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 800px) 100vw, 800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy" />
For the sizes attribute and a full-width image (or close to full width), it seems to work well to use a media query for the maximum width of the image, and if the screen is narrower than that, use the source with the closest width. If the screen is wider than the widest image width, just use the widest one.
<picture>
(I'll get to this later)
#TODO
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images