webp图片格式、响应式图片

webp

---

WebP 图片格式是由 Google 基于 VP8 视频编码格式研发的，同时提供有损压缩和无损压缩两种格式。旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

美中不足的是，WebP格式图像的编码时间“比JPEG格式图像长8倍”。

根据设备的分辨率调用合适的图像

---

使用<picture>

<picture> 元素是一个容器，用来为其内部特定的 <img> 元素提供多样的 <source> 元素。

<picture> 元素零或多个 <source> 元素和一个 <img> 元素，每个 <source> 元素匹配不同的设备并引用不同的图像源，如果没有匹配的，就选择 <img> 元素的 src 属性中的 url。

注意:<img> 元素是放在最后一个 <picture> 元素之后，如果浏览器不支持该属性则显示 <im