For a small project, I wanted to display an author portrait in the bottom right corner of a page. Of course, I wanted the image to be responsive. The only technnique I was sort of familiar with is Foundation interchange, but I wanted to see more. And in particular, I wanted to read about any new (or soon-to-be) HTML5 standard.
After a very quick googling, I stumbled on this Smashing article which very nicely exposes where we stood last year (in July 2013) on this topic. Although many things changed since then, it points out the picturefill library, which is a polyfill for the fast moving picture element, a new HTML standard.
Aware of this polyfill, I searched for more explanations about how this srcset and sizes attributes work. A very good article explained it all to me, including where the specification comes from and with a lot of peas.
Now I get everything that's needed for me to display my reponsive portrait. But how can I make sure that the portrait will never be cut although the whole sizes thing s based on width? Answer: using media-queries based on height. Check it out:
<img id="portrait" src="http://respimg.cdnconnect.com/basic-implentation/test_landscape_1@1x.jpg"
sizes="(max-height: 360px) 360px,
(max-height: 480px) 480px,
(max-height: 768px) 768px,
960px"
srcset="http://respimg.cdnconnect.com/basic-implentation/test_landscape_1@1x.jpg 480h,
http://respimg.cdnconnect.com/basic-implentation/test_landscape_1@2x.jpg 768h,
http://respimg.cdnconnect.com/basic-implentation/test_landscape_1@4x.jpg 960h"
alt="Nymphenburg Castle in Munich during sunset">View the jsfiddle here and <a href="http://fiddle.jshell.net/mckuqx0m/4/show/light/" target="_blank" %}>try it out in a separate window. Don't forget to shrink and grow the window vertically!