使用响应式图像

Sponsor

自从2010年Ethan Marcotte开始讨论响应式网页设计，开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ，因为我们对同一个网站在众多设备宽度下，使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？你愿意在你的手机上加载一个巨大的（虽然更漂亮的）图像？这个问题令人左右为难。

一群来自响应式问题社区组(RICG)的聪明家伙致力于解决这个难题，他们使picture元素和srcset、sizes属性纳入HTML 5.1规范草案 。因为我们无法预测用户在何地以及如何访问我们的网站，所以我们需要浏览器自身根据情况选择最好的图像。新规范将解决以下问题：

• 基于设备象素比（device-pixel-radio）选择
• 基于viewport选择
• 基于Art direction（美术设计）选择
• 基于图像格式选择

该规范中，img元素增加了两个新属性：srcset和sizes。srcset用来声明一组图像源，浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度，描述符w表示图像的宽度；浏览器使用这些信息从列表中选择合适的图像。sizes属性为浏览器提供将要显示图像的尺寸信息，srcset使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像，我将在后面详细讨论。

我们现在可以根据用户的viewport，提供不同质量或美术设计(art direction)的图像，无需借助复杂的服务器端设置。响应式图像将成为HTML规范的重要组成部分，所有浏览器终将都会支持此解决方案。

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

视网膜屏幕的广泛应用，使我们不仅需要考虑屏幕分辨率，而且也需要考虑像素密度。视网膜屏幕，4K显示器，UltraHD-它们都比相同尺寸的标准分辨率显示器填充了更多的像素。更多的像素=更清晰的图像。

有些图片不管屏幕尺寸，始终以固定宽度显示-如站点logo或人物简介图像，也就是说需要根据设备像素比来选择。浏览器将根据设备像素比来选择加载哪张图像。

srcset属性列出了浏览器可以选择加载的源图像池，是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境，利用这些信息来选择适当的图像。不理解srcset的浏览器会直接加载src属性中声明的图像。

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

查看演示

网站logo就是固定宽度图像的一个例子，不管viewport的宽度如何，始终保持相同的宽度。不过，与内容相关的图片，通常也需要响应式，它们的大小往往随viewport改变。对于这类图像，还有更好的处理方法。

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

对于可变宽度的图像，我们使用srcset搭配w描述符以及sizes属性 。w描述符告诉浏览器列表中的每个图象的宽度。sizes属性是一个包含两个值的，由逗号分隔的列表。根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。

sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。需要注意是，源图尺寸值不能使用百分比，vw是唯一可用的CSS单位。

<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="响应式图像" alt="USWNT World Cup victory">

查看演示

上例中，我们告诉浏览器在viewport宽度小于400像素时，使图像的宽度与viewport等宽。在viewport宽度小于960像素时，使图像的宽度为viewport宽度的75％。当viewport大于960像素时，使图像的宽度为640像素。如果你不熟悉vw ，可以看看Tim Severien的大文viewport单位详解 。

浏览器利用srcset和sizes信息来选择最符合规定条件的图像。如果浏览器的viewport是600像素，图像最可能以75vw的宽度显示。浏览器将尝试加载第一张大于450像素（600*0.75）的图像，也就是uswnt-480.jpg。如果我的是dpr为2的Retina显示屏，那么浏览器就会尝试加载第一张大于900像素（600*0.75*2）的图像，也就是uswnt-960.jpg。我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。(译者注：srcset和size列表是对浏览器的一个建议(hint)，而非指令。例如，设备像素比(dpr)为1.5的设备，亦可用1x也可用2x的图像，由浏览器根据其能力、网络等因素来决定。)

前两个例子都是以不同质量显示相同的图像，仅用srcset属性就足够了。不必担心老旧浏览器，老旧浏览器会把它看作为一个普通的图像并从src中加载。如果你想在不同宽度下显示稍微不同的图像，比如在较窄屏幕下仅显示图像的关键部分，那么要使用picture元素。

picture：基于Art direction（美术设计）选择

picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载图片，如果没有img，那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。基于美术设计选择的适用场景为：在一个特定的转效点（breakpoint）需要显示一个特定的图像。使用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="响应式图像" alt="USWNT ticker-tape parade">
</picture>

查看演示

在本例中，当viewport大于960像素时，会加载图像的风景模式版本（ticker-tape-large.jpg）。当viewport宽度大于575像素时，浏览器会加载图像的裁剪过的肖像模式版本（ticker-tape-medium.jpg）。而当宽度小于575像素时，加载的图像（ ticker-tape-small.jpg）已经被裁剪成焦点仅在一个球员上了。

picture元素是向后兼容的；不支持picture元素的浏览器将显示img。图像的所有标准属性（如alt），应该作用在img上而不是picture上。

source：基于图片格式选择

最近几年出现了一些新的图片格式，这些新图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错，但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错，但只有Chrome和Opera原声支持。JPEG-XR，最初被称为高清照片，是微软发布的一个专有图像格式，仅Internet Explorer支持。如果你想了解更多信息，可以查看Zoltan Hawryluk对这些新格式的深入研究。

<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="响应式图像" alt="WWC 2015">
</picture>

source的type属性用来指定每个图像的MIME类型，浏览器会选择第一个含有其支持的MIME类型的源。源的顺序是至关重要的，如果浏览器无法识别所有的图象类型，它会回退至原来的img元素。

现在可以使用这些东东吗？

在写这篇文章的时候， Firefox，Chrome和Opera的最新稳定版本均支持picture。Safari和IE本身均不支持picture。srcset的情况稍微好一点，Firefox、Chrome和Opera的最新稳定版本完全支持，Safari8和Internet Explorer Edge部分支持，可以使用x描述符用于根据分辨率切换，但不支持w描述符。Safari9已经完全支持srcset了（译者注）。

现有不少polyfills解决支持性问题，最知名的恐怕是Scott Jehl的picturefill。目前我（原作者）在我自己的网站上使用Alexander Farkas的respimage。目前的状况是，我们已对响应式图像的处理方案达成一致，并且这些解决方案逐渐被所有的主流浏览器实现。尽管该规范仍在不断完善之中，但原生的响应式解决方案离我们越来越近了。

原文：Using Responsive Images (Now)

翻译：腾讯ISUX – JACE)

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。