You would attempt to set some constraints on the image dimensions at the different breakpoints. For example, you can use percentages if you want a fluid amount. It's really to tell the browser how much space to allocate to the image before it's loaded. This is an old problem and pages that jump around would happen on slower connections.
Ok, my image has 100% width for screens up to 800 px width, what height value do I have to set? You simply don't know this information at the time when the DOM is built.
The idea to set fixed dimensions feels like it comes from a time where we did designs with tables and "optimized" sites for 1024 x 768 pixel screen size.
That was the time when you could tell that this image should be displayed 200 x 200 px in size and nothing else. And it fit. One way or another.
Make no mistake, this is a silly problem to need to hack a solution for. So I would welcome lazy loaded images with space allocation before it's rendered with a responsive sizing.
