responsive image using srcset

https://www.youtube.com/watch?v=QINlm3vjnaY http://googlechrome.github.io/samples/picture-element/ http://www.html5rocks.com/ja/tutorials/responsive/picture-element/

HTML

<picture>
    <source
        media="(min-width: 800px)"
        srcset="
            http://placehold.it/800x800 1x,
            http://placehold.it/1600x1600 2x">
    <source
        media="(min-width: 400px)"
        srcset="
            http://placehold.it/400x400 1x,
            http://placehold.it/800x800 2x">
    <img
        src="http://placehold.it/400x400"
        srcset="http://placehold.it/800x800 2x">
</picture>

CSS

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}