This is some pretty powerful stuff. Here's a more information-dense and up-to-date rundown of srcset and sizes: https://bitsofco.de/the-srcset-and-sizes-attribu

This is some pretty powerful stuff. Here's a more information-dense and up-to-date rundown of srcset and sizes: https://bitsofco.de/the-srcset-and-sizes-attributes/ https://bitsofco.de/the-srcset-and-sizes-attributes/ Notably, it shows how it's possible to use different images based on a portrait or landscape layout of the viewport, which OP doesn't cover. That's not always useful but it's good to know it's there when you might want to use it. I was recently (well, several months ago) tasked with improving the Google PageSpeed scores on mobile for a site which has a lot of image-heavy pages. The end solution involved adapting all images to use a <picture> image with a WebP alternative for browsers that can show it (Google's tools like it when you use their near-proprietary image format; go figure), plus using srcset and sizes (which can be used on <source> tags inside of <picture> tags as well as <img> tags) plus a script which resizes and caches resized versions of large images based on URL parameters (basically an ersatz Glide [0]; I wish I had known it existed when I started). The end result severely reduced page weight for mobile visitors and was successful in raising our PageSpeed scores and appeasing my client. [0]: https://glide.thephpleague.com https://glide.thephpleague.com