Responsive Image (srcset 属性と sizes 属性)

/* CSS */
.container {
  max-width: 1400px;
  margin: 20px auto;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

<img src="images/medium.jpg" 
 srcset="images/small.jpg 640w, 
         images/medium.jpg 980w, 
         images/large.jpg 1280w" 
 sizes="100vw"
 alt="">  

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

<img src="images/medium.jpg" 
 srcset="images/small.jpg 640w, 
         images/medium.jpg 980w, 
         images/large.jpg 1280w" 
 sizes="(max-width: 1280px) 100vw, 1280px"
 alt="">

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

<img src="images/medium.jpg" 
 srcset="images/small.jpg 640w, 
         images/medium.jpg 980w, 
         images/large.jpg 1280w" 
 sizes="(min-width: 980px) calc(100vw - 300px), 100vw"
 alt="">

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