Responsive images solve a huge problem in a way that’s a godsend for web designers: we really don’t have to give it much thought. We just provide browsers all needed details and the browser then finds out what image is best for the user. That decision may be based on many varying factors, it’s up to the browsers to decide: connection speed, screen density, user settings, viewport width, device incapabilities, hell even the presence of a coffee smell if browser devs think that’s appropriate.
I don’t feel the need to go in detail about how it works, you can read up on that here, there and everywhere. But I’ve been teaching responsive images in the past few weeks and in doing so I learned it’s not the simplest HTML concept to grasp. It even feels incorrect having to update a HTML attribute’s value every time you decide a CSS media query break point has to change. Yet only by seeing the often massive amount of bytes it skims off the average web page, it’s so worth digging into.