3.如下栗子中添加了屏幕像素密度作为条件；当像素密度为2x时加载_retina.png 2x 的图片，当像素密度为1x时加载无retina后缀的图片；
| <picture> <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png,img/minpic_retina.png 2x"> <source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 2x"> <img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture"> </picture> |
4.如下栗子中添加图片文件格式作为条件,当支持webp格式图片时加载webp格式图片，当不支持时加载png格式图片；
| <picture> <source type="image/webp" srcset="img/picture.webp"> <img src="img/picture.png" alt="this is a picture"> </picture> |
5.如下例子中添加宽度描述；页面会根据当前尺寸选择加载不大于当前宽度的最大的图片；
| <img src="picture-160.png" alt="this is a picture" sizes="90vw" srcset="picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w"> |
6.如下例子中添加sizes属性；当窗口宽度大于等于800px时加载对应版本的图片；
| <source media="(min-width: 800px)" sizes="90vw" srcset="picture-landscape-640.png 640w, picture-landscape-1280.png 1280w, picture-landscape-2560.png 2560w"> <img src="picture-160.png" alt="this is a picture" sizes="90vw" srcset="picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w"> |
兼容性：
目前只有Chrome ， Firefox ， Opera 对其兼容性较好，具体兼容性如图：
优点：
-
加载适当大小的图像文件，使可用带宽得到充分利用；
加载不同剪裁并具有不同横纵比的图像，以适应不同宽度的布局变化；
加载更高的像素密度，显示更高分辨率的图像；
步骤：
-
创建<picture></picture>标签；
在这些标签内创建一个你想用来执行任何一个特性的<source></scource>标签；
添加一个media属性，用来包含你想要的特性，如宽度（max-width，min-width），方向（orientation）等；
添加一个srcset属性，属性值为相应的图像文件名称，进行加载。如果你想提供不同的像素密度，例如Retina显示屏，可以添加额外的文件名到srcset属性中；
添加一个回退的<img>标签；
