picture 要素サンプル

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

<div class="wrapper">
  <picture>
    <source media="(max-width: 600px)" 
          srcset="images/picture/sample-portrait@1x.jpg 1x,
                  images/picture/sample-portrait@2x.jpg 2x,
                  images/picture/sample-portrait@3x.jpg 3x">
    <source srcset="images/picture/sample@1x.jpg 1200w,
                  images/picture/sample@2x.jpg 2400w,
                  images/picture/sample@3x.jpg 3600w"
          sizes="100vw">
    <img id="sampleImage" src="images/picture/sample@3x.jpg"
     alt="サンプル画像"> 
  </picture>
</div> 

<!--
sample-portrait@1x.jpg : 600x800 /28kb
sample-portrait@2x.jpg : 1200x1600 /79kb
sample-portrait@3x.jpg : 1800x2400 /143kb
sample@1x.jpg 1200 :  1200x800 /49kb
sample@2x.jpg 2400 :  2400x1600 /143kb
sample@3x.jpg 3600 :  3600x2400 /260kb
 -->                 
                  
.wrapper {
  max-width: 1440px;
  margin: auto;
  padding: 30px;
}
img {
  width: 100%;
  height: auto;
  border: 2px solid gold;
}
サンプル画像