It's a quick demo of the three candidates of #respimg syntax. I simply want to compare verbosity of all those.

resimg-syntax-test.html

<!--

A quick demo of the three current candidates of Responsive Images syntax on a real world example for one image.

This on purpose does not include any of the proposed viewport syntaxes because this IMO adds confucion and 
is stylistic only (therefore should go in CSS IMO).

-->

<!-- This is the src-{N} way: http://tabatkins.github.io/specs/respimg/Overview.html -->

<img src-1="(max-width: 400px) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400.png, http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400--@2x 2x" 
     src-2="(max-width: 1024px) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max1024.png, http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max1024--@2x.png 2x" 
     src-3="(min-width: 1025) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--min1025.png" 
     src-4="(monochrome) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--monochrome.png" 
     src-5="(print) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--print.png"
     src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400.png" 
     alt="Survey: Pie chart showing that 72% of users test on all major Dekstop browsers">

<!-- And because not many people know that one can line-break inside one element declaration it will often look like this: -->
<img src-1="(max-width: 400px) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400.png, http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400--@2x 2x" src-2="(max-width: 1024px) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max1024.png, http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max1024--@2x.png 2x" src-3="(min-width: 1025) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--min1025.png" src-4="(monochrome) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--monochrome.png" src-5="(print) http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--print.png" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400.png" alt="Survey: Pie chart showing that 72% of users test on all major Dekstop browsers">


<!-- This is the picture and srcset way: http://picture.responsiveimages.org/ -->

<picture>
  <source media="(max-width: 400px)" srcset="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400.png, http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400--@2x 2x">
  <source media="(max-width: 1024px)" srcset="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max1024.png, http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max1024--@2x.png 2x">
  <source media="(min-width: 1025px)" srcset="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--min1025.png">
  <source media="(monochrome)" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--monochrome.png">
  <source media="(print)" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--print.png">
  <img src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400.png" alt="Survey: Pie chart showing that 72% of users test on all major Dekstop browsers">
  <p>The Survey shows that 72% of users test on all major Desktop browsers such as IE8-11, Chrome, Firefox and Opera. Still, 28% of the users don't test on these browsers.</p>
</picture>


<!-- This is the picture and src way: http://picture.responsiveimages.org/ -->

<picture>
  <source media="(max-width: 400px)" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400.png">
  <source media="(max-width: 400px) and (min-resolution: 1.5dppx)" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400--@2x.png">
  <source media="(max-width: 1024px)" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max1024.png">
  <source media="(max-width: 1024px) and (min-resolution: 1.5dppx)" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max1024--@2x.png">
  <source media="(min-width: 1025px)" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--min1025.png">
  <source media="(monochrome)" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--monochrome.png">
  <source media="(print)" src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--print.png">
  <img src="http://img.anselmhannemann.netdna-cdn.com/img/blog/survey-testing-desktop--max400.png" alt="Survey: Pie chart showing that 72% of users test on all major Dekstop browsers">
  <p>The Survey shows that 72% of users test on all major Desktop browsers such as IE8-11, Chrome, Firefox and Opera. Still, 28% of the users don't test on these browsers.</p>
</picture>

Btw if one is interested I counted characters of all four variants shown above. This includes the spaces (intendation is 2spaces here):

1. 957 chars = srcN (with line-breaks)
2. 923 chars = srcN (no line-breaks)
3. 1218 chars = picture (srcset)
4. 1354 chars = picture (src)

It's not that much difference you see. Surely picture is more verbose because it clearly separates MQ and src by different attributes and sources through different source-elements.