Last active
December 25, 2015 20:49
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Btw if one is interested I counted characters of all four variants shown above. This includes the spaces (intendation is 2spaces here):
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.