To use a range request the client needs to know what range of bytes it needs. Currently your html is:

  <img src="foo.jpg">

Now, let's say foo.jpg is progressive, and if you examine the file you can see that you need H bytes for the header, N bytes for the first layer, M for the next, and so on. Then you could mark up the html as:

  <img src="foo.jpg"
       bytes-1x="(H+N)"
       bytes-2x="(H+N+M)" ...>

but that's a huge pain to generate by hand, and people like to compose html by hand.

If we want something that can catch on, it needs to be something where browsers and servers can negotiate in a fully automated way. Or we can just use srcset/picture.