The viewport-url parts of the src-n syntax are confusing. What about replacing them with something like this?

 <img ad-1 = "v1-small.jpg, v1-large.jpg"
      ad-2 = "v2-small.jpg, v2-large.jpg"
      src-1 = "(min-width: 400px) v1-small.jpg"
      src-2 = "(min-width: 600px) v1-large.jpg"
      src-3 = "(min-width: 1000px) v2-small.jpg"
      src-4 = "(min-width: 1200px) v2-large.jpg" alt="urgh" />

First, define art direction groups. This says that v1-small.jpg and v1-large.jpg are identical, except for size/scaling; the two images in ad-2 are art directed differently than those in ad-1. Furthermore, order implies size: the browser can trust that within each ad-N group, smaller images are listed before large ones.

Then, when listing src-N, we would use media queries as usual to choose a file. If viewport changes, the browser will know:

• which art direction group the image belongs to,
• what other images are in that group,
• if those images are larger or smaller than previously-cached versions

This will let the browser determine whether or not it should trigger a new download. If the browser has cached v2-large.jpg, it doesn't need to download v2-small.jpg. But, it would need to download v1-large.jpg, because the art direction is different.

I'm sure I'm completely missing all the points; please let me know.

UPDATE: For DPR switching, you could maybe do something like:

        src-1 = "(min-width: 400px) v1-small.jpg 1x, v1-large.jpg 1.5x"

...and still have all your files defined in the ad-N groups.