Chrome 38通过\u003cpicture\u003e元素支持Art Direction

Google在最近发布的Chrome 38中，增加了对\u0026lt;picture\u0026gt;元素的支持，让开发者能够针对不同类型的媒体查询（media queries）请求，指定多种不同的图像来源。

\\

对于同样的图片，与传统的PNG或JPG图像格式相比，采用Google带来的WebP图像格式，下载流量最多将能够减少25-34%。不过，尽管该图像格式能够降低网络传输数据量，从而使Web页面的上传速度将得以小幅提升，但为了满足Web响应式设计的需求，还需要引入其他解决方案。

\\

例如，根据DPR（设备-像素-比率），\u0026lt;img\u0026gt;元素的srcset属性可以用来渲染若干固定尺寸图像中的一幅，如下图所示：

\\

\\u0026lt;img src="/images/100-example.jpg"      \srcset=\"/images/150-example.jpg 1.5x, /images/200-example.jpg 2x\"      \alt=\"\" width=\"100\" height=\"150\"\u0026gt;

\\

而另一个方案是基于视区（viewport）大小，呈现经过缩放的图像：

\\

\\u0026lt;img sizes=\"100vw\" srcset=\"example-200.jpg 200w, example-600.jpg 600w, \example-1200.jpg 1200w” src="example-200.jpg"\u0026gt;

\\

从Responsive Images Community Group（RICG）公布的信息来看，Chrome 34+、Safari和Firefox 33+（带有状态flag）都支持srcset属性。微软则正在考虑为IE实现该特性。而Opera 21+由于使用了Chrome的Blink引擎，所以同样支持该特性。WHATWG小组详细列出了srcset属性及其用法（点击查看详情）。

\\

有时候，用户代理需要呈现完整图片，或是呈现部分图片并排除不相干的部分，而这取决于设备的物理大小、屏幕分辨率、朝向（垂直或水平）及其他方面的因素。我们可以从如下示例图片（由responsiveimages.org提供）来了解这个被称为Art Direction的方法。

\\

\\

尽管也可以使用JavaScript来实现这一功能，但是实际上我们并不提倡这种做法，因为某些用户代理会在加载和运行任何脚本之前就下载页面图片；另一些则会在运行脚本、下载图片之前，让页面呈现出空白图片占位。因此，推荐的解决方案是使用picture元素，它让开发者能够指定多重图像来源，并将它们与媒体查询结合。

\\

下面的示例展示了为多种DPR提供不同图片来源的方法：

\\

\\u0026lt;picture\u0026gt;   \u0026lt;source media=\"(max-width: 500px)\" \srcset=\"banner-phone.jpeg, banner-phone-HD.jpeg 2x\"\u0026gt;   \u0026lt;\img src="banner.jpeg" srcset=\"banner-HD.jpeg 2x\" \alt=\"The Breakfast Combo\"\u0026gt; \u0026lt;/picture\u0026gt;

\\

当浏览器无法识别\u0026lt;picture\u0026gt;元素时，将使用\u0026lt;img\u0026gt;元素作为回滚方案。HTML规范包含了其他示例，展示如何使用多重图像来源，用于图像的裁切或不同的图像格式。

\\

Google最近还在其稳定版分支（stable channel）中公布了一份可以用在Chrome 38中进行测试运行的Art Direction的示例。运行该示例的时候，用户要想观测到效果，需要调整浏览器窗口的大小，强迫浏览器呈现不同的图片。

\\

目前，只有Chrome 38+和Opera 25+能够完整地支持\u0026lt;picture\u0026gt;元素。Firefox 33+也支持这一元素，但需要人工启用。而对IE或Safari来说，具体的情况目前尚不清楚。对于尚不支持这一特性的浏览器，想要创建响应式图片的开发者可以使用Picturefill Polyfill作为替代方案。

\\

查看英文原文：Chrome 38 Supports Art Direction through the picture Element