「译」html 5.1 使用响应式图片

自从响应式 web 设计出来之后，程序员和设计师都在寻找方式解决图片的响应式。这是个棘手的问题，因为我们要在同个网站，同一张图片和很多的设备宽度的情况下实现响应式。

响应问题社区组（RICG）已经解决这个难题。这就是为什么 pictrue 标签 和 srcset 、sizes属性被添加到 HTML5.1 规范中。因为我们不能预知用户会在哪里、在什么时候会来访问我们的网站，我们需要浏览器自己在不同的情况下挑出最好的图片。新的规范将解决以下问题：

• 基于设备像素比选择

• 基于视图选择

• 基于方向技能选择

• 基于图像格式选择

img标签添加两个新属性：srcset 和 sizes。
srcset让我们可以声明一系列的图片源，这样浏览器将会根据我们的描述使用相应的图片。 x描述符表示图片的象素密度，w描述符表示图片的宽度。浏览器会根据这些信息从列表中挑选最合适的图片。sizes属性提供浏览器一些上下文可以有不同的尺寸图片被展示，并且必须在srcset属性有w标识符的情况下。这是可变宽度的图像，后面会有详细讨论。

问题是，我们现在有不同的质量或 art direction 的图像都是根据用户的视图窗口，而不是一些复杂的服务器端安装程序什么的。响应图像将成为HTML规范的重要组成部分;最终，所有浏览器都将支持这一方案。

现在，让我们开始学习：

固定宽度的图像：基于设备的像素比选择

随着引进 Retina 屏，它需要考虑到的不仅有屏幕分辨率，还有像素密度。Retina 屏， 4K显示器， UltraHD -所有这些都打包成它们比相同尺寸的标准分辨率显示更多的像素。更多的像素=更清晰的图像质量。

如果，由于某种原因，你有一张图片将永远显示在一个确定的宽度，无论屏幕是什么尺寸，比如网站的 logo，那么「基于设备的像素比选择」就是要选择的方案。浏览器会基于它的像素比加载相应的图片。

srcset属性基本会列出图片源池，从而浏览器会从中挑选一种来加载。这是一个逗号分隔的列表。
x描述符表示图片的 设备的像素比。这得依赖于浏览器在什么环境下操作，它将会利用这些信息去选择最合适的图片。任何不支持srcset属性的浏览器会简单的加载 src 属性上的图片。

例子：

<img srcset="crest-383.jpg 1.5x, crest-510.jpg 2x" src="crest-255.jpg" alt="USWNT crest" />

网站的 logo 无论是在什么视图宽度下，都保持着固定宽度。内容相关的图片通常是响应式的，它们的大小往往取决于视图宽度改变。对于这种类型的图片，有更好的解决方案：

可变宽度的图像：基于视图宽度选择

对于可变宽度的图片，我们使用带有w和sizes的srcset属性。
w：告诉浏览器列表中每张图片的宽度。
sizes：逗号分隔的列表
由于使用了最新规范，如果srcset具有使用w描述的任一图像，则sizes属性也必须存在。

sizes有两种值：
1: media 条件
2: 源尺寸值：在特指 media 条件下的图片尺寸
注意：你不能使用百分比作为源尺寸值；唯一能使用的单位是 vw

<img srcset="uswnt-480.jpg 480w, 
             uswnt-640.jpg 640w, 
             uswnt-960.jpg 960w,
             uswnt-1280.jpg 1280w" 
     sizes="(max-width: 400px) 100vw, 
            (max-width: 960px) 75vw, 
            640px" 
     src="uswnt-640.jpg" alt="USWNT World Cup victory">

这个例子，告诉浏览器：
视图宽度小于 400px：图片是视图宽度的宽度是 1：1
视图宽度小于 960px：图片是视图宽度宽度的 75%
视图宽度大于 960px：图片是 640px 宽

浏览器利用来自srcset和sizes的信息，让图片是最符合规定条件的。如果你浏览器的宽度是 600px，它最有可能展示 75% 的图片。浏览器将会试图加载第一张大于 450px 的图片，即uswnt-480.jpg。如果是在设备像素比是 2 的 Retina显示屏，那么浏览器将会试图加载第一张大于 900px 的图片，即 uswnt-960.jpg。我们无法确定究竟哪些图像将提供服务，因为每个浏览器都有自己如何根据我们提供的信息挑选的适当图片的算法。这是“基于视图宽度选择”的意思。

因为前两个例子显示在不同的质量等级相同的图像，仅srcset属性就足够了。同样，在传统的浏览器，便加载 src 的图片。如果要显示在不同的宽度略微不同的图像，例如，仅在较小的宽度显示图像的关键部分，那么就要使用图像元素。

picture: 基于方向技能选择

picture标签就像是图片和图片源的包装纸。浏览器依然需要img去辨别图片需要渲染，没有img,就什么都不会渲染。source告诉浏览器要展示的 图片替换版本。基于方向技能选择适用于我们希望有一个特定的图像在一个特定的断点显示。使用picture标签在图片选择方面是没有歧义的。

<picture>
  <source media="(min-width: 960px)" srcset="ticker-tape-large.jpg">
  <source media="(min-width: 575px)" srcset="ticker-tape-medium.jpg">
  <img src="ticker-tape-small.jpg" alt="USWNT ticker-tape parade">
</picture>

在这个例子中，图片加载有 3 中情况：
当视图宽度大于 960px 的时候：将会加载 ticker-tape-large.jpg
当视图宽度大于 575px 时，将会加载 ticker-tape-medium.jpg
当视图宽度小于 575px 时，加载 ticker-tape-small.jpg

picture 标签是向后兼容的。浏览器不支持 picture标签也会显示 img。 所有图片的标准属性，比如 alt，应该是应用到 img, 而不是picture。

source: 基于图片格式选择

一些新的图像格式，近年来开始存在。
这些新的图片格式可以在小内容的情况下，提供更好的质量。听起来不错，对吧？然而这些格式在所有浏览器并没有得到普遍支持。
谷歌的 WebP 做的很好，但是仅仅 Chrome 和 Opera 支持。
JPEG-XR, 最初被称为高清组图，是由微软发布的一个专有的图像格式，只有Internet Explorer支持。
如果你想了解更多， 请戳 Zoltan Hawryluk 写的一篇文章 in-depth examination 

<picture>
  <source type="image/vnd.ms-photo" src="wwc2015.jxr">
  <source type="image/jp2" src="wwc2015.jp2">
  <source type="image/webp" src="wwc2015.webp">
  <img src="wwc2015.png" alt="WWC 2015">
</picture>

因为 source 也有 type属性（通过指定 MIME 类型的每个图像），浏览器可以选择第一它所支持的源。
在这种情况下，如果浏览器不识别任一图片类型，那便回到解放前。

兼容性：

本文的翻译是参照原文的大体意思写出来的，如果有描述不对或者错误之处，还请同行朋友指点。
原文： [Using Responsive Images (Now)
](http://alistapart.com/article/using-resp...