HTML5のpicture要素を使ってブラウザの幅と関係なく眠いのを我慢している全然効率的でない男性を出す

ブラウザの幅を変えるとさまざまな眠いのを我慢している全然効率的でない男性が出てきてたのしい!!

解説

HTML5のpicture要素を使っています．
developer.mozilla.org

こんなかんじ．
スマホで見るときは，画面を横にすると何か変わるかもしれない．

<picture>
  <source media="(min-width: 1450px)" srcset="//lh3.googleusercontent.com/-S_m9OixeJuI/V1_D1PsLAWI/AAAAAAABL-g/r4rj0cNH_gATzO1wFXGNzsmnEPAPcRXLQCKgB/s1024/IMG_0192.JPG">
  <source media="(min-width: 1400px)" srcset="//lh3.googleusercontent.com/-ILHgX6OxywE/V1_D1MmlI4I/AAAAAAABL-g/iW3ErHk9TfgkLXQcywRQcFT_z4JUYZSNgCKgB/s1024/IMG_0191.JPG">
  (中略)
  <source media="(min-width: 300px)" srcset="//lh3.googleusercontent.com/-VGhhjfmrLuA/V1_D1C6rTUI/AAAAAAABL-g/5sGOjcA2BVEQR7kq5-olFyFu5zcxqh5RACKgB/s1024/IMG_0169.JPG">
  <img src="//lh3.googleusercontent.com/-VGhhjfmrLuA/V1_D1C6rTUI/AAAAAAABL-g/5sGOjcA2BVEQR7kq5-olFyFu5zcxqh5RACKgB/s1024/IMG_0169.JPG" style="width: 100%">
</picture>