Make the image fluid so it shrinks with its container, then use srcset to let the browser download a file sized for the screen.
img {
max-width: 100%;
height: auto;
}
max-width: 100% stops an image from overflowing a narrow container, and height: auto keeps its aspect ratio as it scales.
<img src="image-400.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Description">
srcset lists the same image at several widths, and sizes tells the browser how wide it will display at each breakpoint. The browser weighs that against the screen's pixel density and downloads only the best match. For a different crop on small screens, <picture> with <source media> handles art direction.
When an image must fill a fixed frame, aspect-ratio reserves the box and object-fit: cover crops the image to fill it.
CSS background images use media queries, or image-set() for pixel density, to swap files.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓