srcset serves the right image without JavaScript

Responsive images used to mean shipping the desktop file to everyone, or swapping src after load — which downloads both. srcset hands the browser the candidates and lets it choose before the request is made, using the viewport and the device pixel ratio it already knows.

<img src="frame-640.jpg"
     srcset="frame-640.jpg 640w,
             frame-1280.jpg 1280w,
             frame-1920.jpg 1920w"
     sizes="(max-width: 700px) 100vw, 700px"
     alt="Wide acetate frame, front view">

sizes is the part that gets left out and it is the part that matters: without it the browser assumes the image occupies the full viewport width and over-downloads on every layout where it does not. The src stays as the fallback for browsers that ignore all of this, which in practice means IE.