1.使用picture标签

先来一段关于mdn的解释：

<picture> 元素是一个容器，用来为其内部特定的 <img> 元素提供多样的 <source>元素。浏览器会根据当前页面（即图片所在的盒子的容器）的布局以及当前浏览的设备（比如普通的屏幕和高清屏幕）去从中选择最合适的资源。

---

该标签有两种使用方法

1.使用media属性

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture

           media 属性允许你提供一个用于给用户代理作为选择 <source> 元素的依据的媒体查询。如果这个媒体查询匹配结果为 false，那么这个 <source> 元素会被跳过

        2.使用type属性

<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

   type 属性允许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过。

2.使用img标签的srcset和sizes属性

CSS代码：
.demo > .image { margin-bottom: 10px; max-width: 100%; float: left; }
.demo > .content { margin: 0 0 10px 140px; min-height: 96px; max-width: 100%; padding: 5px; background-color: #eee; vertical-align: top; box-sizing: border-box; }
@media screen and (max-width: 360px) {
    .demo > .image { float: none;}
    .demo > .content { margin-left: 0; }
}
HTML代码：
<img class="image" src="mm-width-128px.jpg"
     srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">
<div class="content">当视图宽度不大于360像素的时候，左右布局变成上下布局，同时图片撑满屏幕显示。</div>

<img class="image" src="mm-width-128px.jpg"
     srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
     sizes="(max-width: 360px) calc(100vw - 20px), 128px">
<div class="content">当视图宽度不大于360像素的时候，左右布局变成上下布局，同时图片撑满屏幕显示。</div>

     srcset需要提供几种图片以及断点，其他都交给浏览器智能解决，浏览器会自动根据场景匹配最佳显示图片。

    

   当<img>元素的宽度规格为128的时候，加载128px.jpg，宽度规格为256的时候，加载256px.jpg， 宽度规格为512的时候，加载512px.jpg。

    这里的宽度规格就是w描述符的另外一种理解，其与sizes属性设定和屏幕密度密切相关。

   举个例子，假设屏幕密度是2的iPhone6手机，sizes属性计算值是128px，则此时<img>实际的宽度规格应该是128*2也就  是      256w，因此会加载256px.jpg这张图。