Responsive Image (picture 要素)

<picture>
  <source media="(max-width: 650px)" 
             srcset="images/small.jpg 650w" 
             sizes="100vw">
  <source media="(max-width: 1280px)" 
             srcset="images/medium.jpg 960w, images/large.jpg 1280w" 
             sizes="100vw">
  <img src="images/large.jpg" alt="サンプル画像"> 
</picture>
   

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

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

<picture>
  <source media="(min-width: 961px)"
          srcset="images/large.jpg 1280w"         
          sizes="100vw">
  <source media="(min-width: 651px)" 
          srcset="images/medium.jpg 650w" 
          sizes="100vw">
  <img src="images/small.jpg" alt="サンプル画像"> 
</picture>

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

<picture>
  <source media="(min-width: 961px)"
          srcset="images/large.jpg 1280w"         
          sizes="100vw">
  <source media="(min-width: 651px)" 
          srcset="images/medium.jpg 650w" 
          sizes="100vw">
  <source media="(min-width: 100px)" 
        srcset="images/small.jpg " >
  <img src="images/large.jpg" alt="サンプル画像"> 
</picture>