Responsive Image (picture 要素2 解像度による出し分け)

<picture id="pic1">
  <source media="(min-width: 768px)" 
          srcset="images/large.jpg 1x,
                  images/large_1.5x.jpg 1.5x,
                  images/large_2x.jpg 2x" />
  <source media="(min-width: 320px)" 
          srcset="images/medium.jpg 1x,
                  images/medium_1.5x.jpg 1.5x,
                  images/medium_2x.jpg 2x" />
  <img src="images/small.jpg" 
       srcset="images/small_1.5x.jpg 1.5x,
               images/small_2x.jpg 2x"
       alt="サンプル画像" />
</picture>

Window width: px (Image width: px) / Device Pixel Ratio:

iPhone などの解像度が 2x のデバイスで確認すると、2x の画像が表示されます。