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>