Skip to content

Instantly share code, notes, and snippets.

@anselmh
Last active December 25, 2015 20:49
Show Gist options
  • Save anselmh/7037474 to your computer and use it in GitHub Desktop.
Save anselmh/7037474 to your computer and use it in GitHub Desktop.
It's a quick demo of the three candidates of #respimg syntax. I simply want to compare verbosity of all those.
<!--
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>
@anselmh
Copy link
Author

anselmh commented Oct 18, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment