【译】高dpi图片对于不同设备的适配方案

介绍

在当今日益复杂的设备领域，屏幕的可用像素密度已经变得非常广泛。
既有非常高分辨率的显示设备，也有远远落后的设备。
应用程序开发人员需要支持一系列像素密度的显示设备，这可能是相当具有挑战性的。
在移动web端，情况变得更加复杂：

• 各种各样的设备具有不同的外形尺寸。
• 受限的网络带宽和电池寿命。
  在图片方面，Web应用程序开发人员的目标是尽可能高效地提供最佳质量的图像。
  本文将介绍适用于现在和不久将来的有效技术来达到这一效果。

<!-- more -->

如果可能，尽量避免使用图片

打开这个蠕虫之前，请记住，Web有许多强大的技术，主要是分辨率和DPI独立。 具体来说，由于web的自动像素缩放功能（通过devicePixelRatio），文本，SVG和大多数CSS将“只工作”。

也就是说，你不能总是回避使用图片。
例如，当你在处理一些图片资源的时候，很难用纯svg或css来处理。
把图片自动转为svg并无太大意义，因为只是把图片简单的放大，看起来会比较模糊。

高DPI图片技术概览

有许多技术用于解决尽可能快地显示最佳质量图像的问题，大致分为两类：

• 单张图片进行质量优化
• 多张图片选择性展示

单图片解决方案：对一张图片进行巧妙地处理。
缺点就是不可避免地牺牲在某些设备上的性能，因为即使在具有较低DPI的旧设备上也将下载高DPI的图片。
包含以下几种实现方式：

• 高压缩的高DPI图片
• webp图片格式
• 渐进式的图片格式

多图片解决方案：使用多张图片，选择最优的图片进行显示。这种方式会额外增加开发人员的工作量，因为针对每个图片都要创建多个版本，并使用最优的选择策略。一些可选的方式：

• Javascript
• 服务端转发
• css媒体查询
• 利用浏览器内置特性（image-set()， sercset）

高压缩的高DPI图片

图片资源通常占网站下载带宽的60%，如果提供高DPI图片给所有客户端，这一占比将继续扩大。那么具体情况如何？

我用了一些测试脚本来生成图像质量分别为90%，50%，20%的1x图和2x图：

从这个小的不太科学的样本来看，似乎压缩大图像提供了一个良好的质量尺寸权衡。
对于我们的眼睛，高压缩比的2x图像实际上看起来比未压缩的1x图片更好。

当然，向2x设备提供低质量，高压缩比的2x图片远不如提供高质量的图片，并且上述方法将导致图像质量损失。
如果你比较90%图像质量和20%图像质量的图片，你会感到明显的失真和颗粒感。
在对图片质量有较高要求的情况下（例如，照片查看器应用程序），或者对于不愿意妥协的应用程序开发人员来说，这些图片是不可接受的。

上述比较使用了未压缩的JPEG图片。值得注意的是，在广泛使用的图像格式（JPEG，PNG，GIF）之间还需要进行更多的折衷和取舍，这使我们选择了另一种处理方式...

webp图片格式

WebP是一个非常引人注目的图像格式，压缩非常好，同时保持高图像保真度。 当然它并不是所有情况下可用！

一种方法是通过JavaScript检查是否支持WebP。
通过data-uri加载1x图像，等待加载或错误事件触发，然后验证大小是否正确。 Modernizr附带了这样的功能检测脚本，可通过Modernizr.webp获得。

更好的实现方式是在css中使用image()函数。如果你有webp或者jpeg格式的图片，可以写成：

#pic {
  background: image("foo.webp", "foo.jpg");
}

这种方法有一些问题。
首先，image()没有被广泛实现。
第二，虽然WebP压缩打破了JPEG的压缩极限，它仍然是一个相对性的改进 - 体积减少不到30％。
因此，单独的WebP不足以解决高DPI问题。

渐进式图片格式

渐进图像格式，如JPEG 2000，Progressive JPEG，Progressive PNG和GIF的好处就是在图片完全加载之前能看到图片。
这可能会产生一些额外的开销。 Jeff Atwood声称渐进式图片“增加了约20％的PNG图像的大小，和约10％的JPEG和GIF图像的大小”。
然而，Stoyan Stefanov声称，对于大文件，渐进式图片更高效（在大多数情况下）。

乍一看，渐进图像看起来非常有前途，能尽可能快地提供最好的质量图片。
现实是，浏览器一旦知道额外的数据无法提高图片质量（所有保真度的改进是基于子像素的），可能停止继续下载和解码图片。

虽然连接容易终止，但是重新启动它们通常是昂贵的。
对于具有许多图像的站点，最有效的方法是保持单个HTTP连接活动，尽可能长时间地重复使用它。
一张图片下载完毕，浏览器将关闭当前连接，然后再创建新的连接，这在弱网络环境中可能真的很慢。

对此的一种解决方法是使用HTTP Range请求，它允许浏览器指定要提取的字节范围。
智能浏览器可以做出HEAD请求来获取标题，处理它，决定实际需要多少图片然后获取。
不幸的是，HTTP Rang在Web服务器中支持不足，使得这种方法不切实际。

最后，这种方法的一个明显的限制是，你不能选择图像的分辨率，只能选择相同图像的不同的保真度。因此不能满足“艺术级别”的用户体验。

用javascript选择图片进行加载

最明显的方法是在客户端中使用JavaScript来决定加载哪一种图片。
这种方法需要获取浏览器的信息来进行判断。
可以通过 window.devicePixelRatio 获取设备像素比率，获取屏幕宽度和高度，甚至可能通过navigator.connection或发出假请求，如foresight.js库做一些网络连接嗅探。
收集所有这些信息后再决定要加载哪个图片。

有大约一百万个JavaScript库做上面的事情，不幸的是没有一个是特别好用的。

这种方法的一个大缺点是，使用JavaScript意味着将延迟图像加载，直到前瞻解析器完成。
这实质上意味着在pageload事件触发之前，图片甚至不会开始下载。

由服务端选择图片

可以通过为每个图片编写自定义请求处理程序来处理。
这样的处理程序将基于User-Agent（中继到服务器的唯一信息）检查Retina支持。
然后，根据服务器端逻辑决定是否要提供高DPI图片来加载适当的资产（根据一些已知的惯例命名）。

不幸的是，用户代理不一定提供足够的信息来决定设备是否应该接收高质量或低质量的图像。
此外，与User-Agent相关的任何内容都可能成为被攻击的漏洞，应该尽量避免使用。

用css媒体查询

CSS媒体查询可以让浏览器知道你的意图并加载正确的的代码。 除了最常见的媒体查询使用 - 匹配设备大小 - 还可以匹配devicePixelRatio。 相关联的媒体查询是device-pixel-ratio，并且有min和max值可以设置。 如果要加载高DPI图片，且设备像素比率超过阈值，则可以执行以下操作：

#my-image { background: (low.png); }

@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

使用这种方法，可以重获前瞻性解析的好处，而JS解决方案失去了它。
还可以灵活地选择响应断点（例如，可以加载低，中和高DPI的图片），当某些图片请求出错的时候。

不幸的是，它仍然有点笨拙，还需要编写且看起来奇怪的css。 此外，此方法仅限于CSS属性，因此无法设置<img src>。所有的图片必须都是背景元素。

使用新浏览器特性

最近有很多关于web平台支持的高DPI图片问题的讨论。 苹果最近把image-set()这个CSS函数添加到了WebKit。 因此，Safari和Chrome都支持它。 由于它是一个CSS函数，image-set()没有解决<img>标签的问题。 srcset属性解决了这个问题, 下面将更深入地讨论image-set和srcset。

image-set

image-set 函数使用非常简单，在webkit下需要添加前缀：

background-image:  -webkit-image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

它将告诉浏览器有两张图片可选。一张是1x图，一张是2x图。然后浏览器会根据一系列因素来自动选择合适的图片加载。

另外浏览器将会子自动缩放对应的图片大小进行加载。

除了设置 1x,1.5x或Nx之外，还可以指定其它设备像素密度。

这种方式比较理想，除开在那些不支持 image-set函数的浏览器上（将不显示任何图片！这太悲剧了，所以需要备用策略）。

background-image: url(icon1x.jpg);
background-image: -webkit-image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

支持image-set函数的浏览器将选择图片进行加载，那些不支持的将加载1x图片。
明显的缺陷就是在不支持image-set函数的浏览器上只会加载1x图片。

srcset

<img alt="my awesome image"
  src="banner.jpeg"
  srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

如上所示，除了image-set提供的x声明之外，srcset元素还接受对应于视口大小的w和h值，试图提供最相关的版本。
上面将为banner-phone.jpeg提供视口宽度在640像素以下的设备，banner-phone-HD.jpeg到小屏幕高DPI设备，banner-HD.jpeg到高DPI设备，屏幕大于640px，以及banner.jpeg 到一切。

因为img元素的srcset属性在大多数浏览器中没有实现，所以你可能很容易想到用带有背景的<div>替换img元素，并使用image-set函数。这种方式可以正常显示，但缺点就是，<img>标签是具有语义的，使用div降低了爬虫的可访问性。

结论

没有解决高DPI图片问题的银弹。

最简单的解决方案是完全避免图像，选择SVG和CSS。 但是，这并不现实，特别是如果网站上有高品质的图片。

JS，CSS和使用服务器端的方法都有自己的优点和缺点。 然而，最有希望的方法是利用新的浏览器功能。 虽然浏览器对image-set和srcset的支持仍然不完整。