In this template , we tell a user’s browser about what images and sizes are available to display on a user device.
We also added breakpoints (min/max-width) to switch between appropriate sizes. The browser then does all the work figuring out which image suits the device best.
To become a pro in responsiveness, check out MDN web docs and our course Introduction to Responsive Images and learn more about why it matters: performance, art direction, WebP, and breakpoints.