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.