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-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.