转载

Responsive Image:使用srcset

今天给大家介绍有关于响应式设计中的一个新东西，现在也比较流行：响应式图像。RWD不是一个新话题，但实现它的方法并不轻松，在实现过程当中充满了陷阱。尤其是当RWD涉及到图片的处理时，有很多问题还有待于解决。

介绍

在整个网站的开发中，在管理图片上较为困难。注意，图片要在各种设备上平滑过渡显示，它们将会碰到的问题有：

适当的优化和减少图片的体积
注意不要浪费带宽（网站的成败与否加载速度是其中主要因素之一）
设备使用相应的解决方案

对于第一个问题，使用 TinyPng 和 JPEGmini 工具可以帮助减少图片的体积和优化图片。

对于第二个问题，在一些场合下我们可能要使用到强大的媒体查询。多亏了有他们，我们可以很简单的处理背景图片的问题。但是，有些地方使用的是 img 来显示图片，这也是我们要解决的第三个问题，也是最后一个问题，如何根据设备的分辨率调用合适的图像。

在这种情况之下，有个两个解决方案：使用 <picture> 元素和 <img> 元素的 srcset 属性。

在这篇文章中，我会向大家总体的介绍 srcset 属性，而 <picture> 元素的使用将放到下一篇文章来介绍。

`srcset` 属性

使用这个属性主要有什么好处呢？好处就是Web开发人员可以给使用高分辨率的用户显示高分辨的图像源，给其他设备分辨率的用户使用其他的图像源。在第一种情况下使用低PDD(pixel density displays)不需要背负着下载无用的高分辨率图像，而担心浪费带宽；而后者可以享受高清设备带来的不一样的享受。在第二种情况中，我们可以根据不同的屏幕尺寸指定不同的图像，这主要是根据用户的设备来提供一个较好的图像源。

事实上， srcset 属性就做了这样的事情，根据像素密度或用户使用的屏幕尺寸大小，指定一个图像源。所以说， srcset 属性可以让浏览器提供一套"建议"，让浏览器根据正确的行为匹配正确的图像。通过这样做，我们提高了Web的质量，同时提高了Web页面的加载速度和给用户一个较好的体验。

在这一点上，这个属性的基本特征就是： 根据指定的条件来做选择，使其工作 。这对于我们编码工作和实现的方法变理更为简易。

W3C规范是这样描述 srcset : srcset 属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。

原话：

The srcset attribute allows authors to provide, in a compact manner, multiple variants of the same image at differing resolutions or for different viewport dimensions. User Agents may make their resource selection before fetching any of the resources, thus avoiding multiple resource loads and the associated performance problems in constrained bandwidth environments.

srcset 属性包含一系列的逗号分隔值，一方面是指定图像的 url ，另一方面指图像将要显示的条件。图像条件我们可以看到有像素密度、视窗尺寸大小或者同时两者都存在。有一点非常有趣，浏览器可以根据用户的设置或页面访问时间，选择或抓取一个低分辨图像和高分辨图像。

想象一下，在你的移动浏览器偏好设置允许请求高分辨图像。例如，只有当连接到wifi的网络环境，或者在网络不强时会询问你是否手动设置浏览器偏好，允许加载低分辨图像。

语法格式如下：

<img src="small-photo.jpg" srcset="big-photo.jpg 2x" />

上面的代码要求浏览器显示名为 small-photo.jpg 图像。除非在一个高分辨显示器(像素密度为 2x ，比如Retina屏幕)，才显示名为 big-photo.jpg 图像。请注意，只有浏览器理解这个属性才会显示其他图像，如果浏览器不能正确的解释这个属性，流星器会忽略其他图像，回退到 src 属性指定的图像。

如上所述，这个属性不仅限于高密度分辨率的设备。在一些情况下，还可以根据屏幕的视窗尺寸的宽度来选择图片，这就相当于媒体查询查到一个断点时加载背景图像。受益于它，你必须在指定的像素的数量后跟一个 w （例如 600 w ）。为了更好的理解这个示例，让我们来看一个来自 Sxc.hv 网站的效果——"莫斯科的秋季"。压缩后的尺寸是 1368 x 700 ,优化后体积是 389kb 。

Responsive Image:使用srcset

到目前为止，我们所讨论的优势是让用户在使用他们的智能手机上网时下载一张大小比设备更大的图像，那么他的设备可以显示吗？此外，请记住移动连接受到一定的限制，一个棘手的问题就是图像过大将减缓你的页面加载，这可能会导致您的用户离开你的网站（很明显，首要的就是避免这种现像）。已经说过了，你可以考虑使用和设备尺寸相同的图像，比如尺寸 400 x 22px ，大小约 40kb 。

Responsive Image:使用srcset

令人难以置信的是，使用下面的一段代码，我们就可以让用户节省带宽和改善用户的体验：

<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />

这段代码使用了 low-density-photo.jpg 图像作为候选图像，根据不同的条例提供了显示图像的一个列表：设备屏幕宽度小于或等于 480px 屏幕使用 small-photo.jpg ，设备屏幕宽度小于或等于 1024px 使用 big-photo.jpg ，最后是有两个条件，设备屏幕小于或等于 1024 的Retina屏将显示 high-density-photo.jpg 图像。

有一个不太好的消息要告诉你，目前支持 srcset 的浏览器只有 Webkit 引擎的浏览器:

此外，你不能设置一个图像基于 max-width 设备的屏幕，因为目前还没有具体说明如何使用。这个问题有点复杂，所以要不断检查规范是否有更新，阅读更多关于它的规范和方法才能更好的实现你的项目需求。

有关于 srcset 的 W3C规范的草案在2013年12月2日发布了，草案中包含了一些有关于这个属性使用的示例和如何使用这个属性。

作为一个编辑的草案，我们也只能说这个属性离我更近，至于什么时候浏览器能全面支持和使用 srcset 属性，我们只能抱着希望期待。

总结

在本文中，我们已经描述了 srcset 属性能更好的帮助Web开发人员更好的管理网站的图片。然而，正如我们所看到的，目前支持的浏览器还很少，但我们有自信，浏览最终将会解决这个问题。

在下一篇文章中，将介绍一个类似 srcset 属性的 <picture> 元素。看看后者又是如何帮助开发者管理Web页面的图像。

扩展阅读

Srcset专刊
The srcset attribute
Responsive Images in Practice
Responsive Images: Use Cases and Documented Code Snippets to Get You Started
WebKit Has Implemented srcset, And It’s A Good Thing
Responsive Images & srcset
Responsive Images 101, Part 4: Srcset Width Descriptors
Generate multi-resolution images for srcset with Grunt
Responsive Images Revisited—The Srcset Attribute
How we fixed responsive images
Derek Johnson talks Responsive Images
Responsive Images: The Ultimate Guide

本文根据 @Annarita Tranfici 的《 Responsive Images, Part 1: Using srcset 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://www.sitepoint.com/responsive-images-part-1-using-srcset/ 。

大漠

常用昵称“大漠”，W3CPlus, Sass中国创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

正文到此结束