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> 元素之后，如果浏览器不支持该属性则显示 <img> 元素的的图片。

<!-- source可有可无； 如果media媒体查询匹配结果为 false，那么这个 <source> 元素会被跳过。 -->
<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

<!-- type 属性允许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过。 -->
<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

浏览器支持

表格中的数字表示支持该元素的第一个浏览器版本号。

元素
<picture>	38.0	13.0	38.0	9.1	25.0

<img>元素的srcset属性

srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像著作权归作者所有。

srcset格式：

图片地址  +  一个空格  +  图像的真实大小（以像素为单位的大小，只是单位不是px）[单位w，而不是px] 或者 像素密度[单位x]，多个资源之间用逗号分隔。

如果没有指定源描述符，那它会被指定为默认的 1x。

在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源 在相同的srcset两个源都是 '2x'）也是无效的

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写：

1. 一个媒体条件（(max-width:480px)）
2. 一个空格
3. 当媒体条件为真时，图像将显示的宽度（440px）

<!--在支持 srcset 的用户代理中，当使用 w 描述符时，src 属性会被忽略。当匹配了媒体条件 (min-width: 600px) 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。-->

<img src="/files/16864/clock-demo-200px.png"
      alt="Clock"
      srcset="/files/16864/clock-demo-200px.png 200w,
          /files/16797/clock-demo-400px.png 400w"
      sizes="(max-width: 600px) 200px, 50vw">

css image-set()

css属性image-set()支持根据用户分辨率适配图像。

body {
    background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
    background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}

上述代码将会为普通屏幕使用 pic-1.jpg，为高分屏使用 pic-2.jpg，如果更高的分辨率则使用 pic-3.jpg，比如印刷。

兼容性： 火狐、IE不支持