声明：此篇文章由靠谱男青年奖得主根据Pearl Chen的英文文章《Built-in Browser Support for Responsive Images》进行翻译，整个译文带有我自己的理解，如果译得不好或不对之处还请指点。

如需转载此译文，需注明英文出处：http://www.html5rocks.com/en/tutorials/responsive/picture-element/ 以及作者、译者相关信息

——作者：Pearl Chen

——译者：靠谱男青年奖得主

介绍<picture>标签

<picture> 标签提供了浏览器原生支持的图像资源加载方法。web开发者们无需在使用CSS和Javascript Hacks来在响应式设计中处理图像，而使用这种设计方式创造出的产品的使用者们会从这个浏览器底层优化的图像资源加载方式获益——特别是对于那些网络加载速度很慢的用户。

随着srcset和sizes这两个<img>标签的新属性的加入，<picture>标签使得程序员在选择加载图像资源时更具灵活性。书写明确地的HTML标记，让浏览器去查明接下来这些适应情况，不管是单独使用还是和其他方法一同使用，从而更好地支持响应式设计，就爱哭爱网页加载速度。加载情况有：

• 基于屏幕方向的选项

这是一个手机设备还是一个PC端设备？通过屏幕方向的识别来判断载入资源图片。

resized-image.png

• 基于设备像素比的选项

这个设备是不是高分屏？要针对屏幕的高分辨率去加载更高分辨率的图像。

• 基于视图的选项

图像是否在视图中采用fixed布局？那么就使用视图宽度判断图像动态变化。

• 基于图像格式的选项

浏览器是否支持其他的图像格式？如果确实如此，我们可以选择加载诸如webp[1]后缀的其他格式图像。

基于屏幕方向的选项

这应该是<picture>标签在进行响应式变化是最常见的一个使用情况。不去使用一张图以设备宽度为标准来进行缩放，取而代之的解决方案是使用多个图像，他们中的每一个都是对应平台上最适合的尺寸。

改善了加载表现

当使用<picture>或<img/>标签的时候,如果使用了srcset和sizes属性，那么浏览器只下载那个最适合当前使用情况的图片，这个改进符合浏览器语法，而且可以节省图像缓存，改进预加载能力。

看一个演示

事实是，网络被创造是为了放置小猫照片的。使用<picture>标签我们可以去模仿小猫适应空间的能力，无论这个空间是很大还是很小

kitten-large.png

点击这个[超链接](http://googlechrome.github.io/samples/picture-element/

resized-image.png

到目前为止我们只是看了一些<piture>可以做到的一些小例子。下面来看看语法

<picture>语法

下面的这一串HTML和CSS语句片段就是我们为了实现上边这个demo的所有代码。

<style>
  img {display: block; margin: 0 auto;}
</style>

<picture>
  <source 
   media="(min-width: 650px)"
   srcset="images/kitten-stretching.png">
 <source 
   media="(min-width: 465px)"
   srcset="images/kitten-sitting.png">
  <img 
   src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

看看，这里面没有Javascript代码，并且也没有第三方库。CSS语句仅仅是去控制图像的放置位置，不包含设备查询代码。这意味着你只需要HTML就可以进行图片的响应式开发。

使用<source>标签

<picture>标签没有自己的私有属性，自适应的秘密在于<picture>是被用作<source>标签的容器。
<source>标签是用来加载媒体文件，类似于音频和视频，目前他开始对图片支持，并且加入了更多的属性。

srcset（必须的属性）

• 接受的参数是单独一个图片的文件路径（比如srcset = "../../kitten.jpg"）
• 或者是使用逗号隔开的一个路径列表，同时在属性值里加上分辨率表达参数（比如：srcset="kitten.png, kitten@2X.png 2x），1x是默认的，所以他在表达式中是被省略的。

查看“使用分辨率表达式来组合路径”获得更详细的使用方法。

media（可选属性）

• 接受一个有效的媒体查询语句，和css的@media媒体查询语句一样（比如：media = "(max-width:30em)"或者medai = "(min-width):30em"）

查看之前的"<picture>语法代码模块"了解具体使用例子

sizes(可选属性)

• 接受一个单独的宽度表达式（比如:sizes="100vw"）,或者是你可以放置一个媒体查询语句和一个宽度表达式（比如：sizes="(max-width: 30em) 100vw"[2]）。

• 或者是接受一个由逗号隔开的表达式列表（比如：`sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)[3]）,最后一个参数用作默认设置。

查看使用"宽度表达式合并"模块获得使用方法。

type(可选属性)

• 接受一个MIME type表达式(比如： type="image/webp"或者是type="image/vnd.ms-photo"等)

查看“加载其他图像格式”获得更多使用方法

在最后加上<img/>标签

目前<img/>标签经过用法升级之后也可以在<picture>标签内部使用，这样做是为了兼容不支持<picture>标签的浏览器或者是没有<source>标签的情况或者是<source>表达式没有使用的现实情况。<picture>标签内的这个<img/>标签是必需的，如果你忘了加这个标签那么在页面上什么都不会显示，哪怕你加了完整的<source>也一样。

在<picture>标签中使用<img/>标签来声明默认图片，并且将它作为<picture>的最后一个子节点，只有在<img/>存在的情况下<source>才会被声明、渲染。同时不要忘了给<img/>增加alt属性

使用分辨率表达式来组合路径

为了保证对于高分辨率屏幕的支持，srcset属性支持分辨率倍数定义如1x，1.5x,2x,3x。最新的srcset属性已经同时支持<img/>和<picture>标签了
下面这个例子支持了三种设备分辨率：1x,1.5x,2x:

<picture>
  <source 
    media="(min-width: 650px)" 
    srcset="images/kitten-stretching.png,
            images/kitten-stretching@1.5x.png 1.5x,  
            images/kitten-stretching@2x.png 2x">
  <source 
    media="(min-width: 465px)" 
    srcset="images/kitten-sitting.png,
            images/kitten-sitting@1.5x.png 1.5x
            images/kitten-sitting@2x.png 2x">
  <img 
    src="images/kitten-curled.png" 
    srcset="images/kitten-curled@1.5x.png 1.5x,
            images/kitten-curled@2x.png 2x"
    alt="a cute kitten">    
</picture>

使用宽度表达式合并属性

谷歌的web开发最佳实践手册已经涵盖了最新的<img/>标签支持的sizes属性：

当一个图片的大小和分辨率是未知的并且有可能是浮动的，那么我们就很难去给他一个适应的属性
不去给图片一个确切的宽度和分辨率，取而代之是给<img/>对象增加属性，以允许浏览器经过计算之后改变他的宽度，选择最确切的一个尺寸进行下载

下面是一个使用sizes的例子，这个图片永远只填满设备宽度的80%，实现方法是使用secset属性来选择160px、320px、640px、1280px的宽度：

<img src="lighthouse-160.jpg" alt="lighthouse"
 sizes="80vw"
 srcset="lighthouse-160.jpg 160w, 
         lighthouse-320.jpg 320w,        
         lighthouse-640.jpg 640w,
         lighthouse-1280.jpg 1280w">

浏览器会根据对应的浏览器视图宽度来选择展示图片

lighthouse-example-img.png

上边这个例子，左边的视图差不多800px宽，浏览器就会加载-640.jpg那副图，除非设备分辨率是2x类型——这样的花就需要-1280.jpg了
通过加入<picture>标签，<img/>和<source>标签都可以使用sizes属性了。

<picture>
    <source media="(min-width: 800px)"
    sizes="80vw"
    srcset="lighthouse-landscape-640.jpg 640w,
                lighthouse-landscape-1280.jpg 1280w,
                 lighthouse-landscape-2560.jpg 2560w">
<img src="lighthouse-160.jpg" alt="lighthouse"
    sizes="80vw"
    srcset="lighthouse-160.jpg 160w,
               lighthouse-320.jpg 320w,
              lighthouse-640.jpg 640w,
              lighthouse-1280.jpg 1280w">
</picture>

上边的这个例子里如果浏览器的宽度超过了800px，就会显示这个带有陆地的大图。

lighthouse-example-picture.png

加载其他的图片格式

<source>标签的type属性可以用来加载其他格式的图片，但这个属性并不是全部都合适的，比如WebP格式在支持的浏览器上加载出来就是WebP，而在不支持他的浏览器上加载出来就是JPEG.

<picture>
 <source type="image/webp" srcset="images/butterfly.webp">
 <img src="images/butterfly.jpg" alt="a butterfly">
</picture>

译者注：

[1] WebP:这是谷歌定义的一种新的文件格式，目前还未得到大范围推广，chrome和opera支持，与之一起的还有webM,互联网专用的视频格式

[2] sizes="(max-width: 30em) 100vw 这里的VW单位意思是“viewport width”，前面的数字代表的是一个百分比，100vw的意思是“对象宽度占视图宽度的100%”，是一个宽度单位。

[3] calc()方法.calc 是 calculate 计算的简写，这个方法允许以表达式的方式来定义样式，比如calc(100% - 30px)意思就是宽度是比100%视图宽度窄30px。MDN提示这是一个实验性质的方法。