适配高分辨率的图片High DPI Images for Variable Pixel Densities

用最高的效率与性能提供最好的图片质量。

本文内容来至http://www.html5rocks.com/en/mobile/high-dpi/。是在这篇文章的翻译的基础上进行了总结和说明。

眼下面临的问题
1.Android手机太多，各种分辨率，各种尺寸。

2.手机流量带宽与电量的问题。

使用图片的原则是，用最大的效率与性能提供最好的图片质量。这篇文章也是要解决这个核心的问题。

历史背景

像素密度的发展历史并不长，早起都是使用72或者96DPI。

像素密度能高速的发展主要是由于移动设备的大量使用，由于移动设备通常距离用户的眼睛更近，这样像素密度低了就不好看。

像素密度的理想情况就是物体本身的密度。如今设备的发展的速度已经能够达到视网膜的极限了。

虽然低分辨的图片在高分辨的手机的表现与原来老设备上的表现一致，可是人们已经不惬意了，由于例如以下图的比較。像素密度与高图像表现越好，想比之下就不惬意了

避免使用位图（非矢量图形）

1.能够的话不要使用位图，而使用SVG或者CSS来实现。由于SVG或者CSS在现有技术能很好的自己主动的适配。

使用reference pixel 作为像素单位

 详见HTML specification 

两个大的解决方向
1.使用优化的单张图片。不同的分辨率都使用这一张优化后的图片。

这样的解决方法有

1.压缩高分辨率的图片

2.不同的情况使用不同的图片。即从多张不同分辨率的图片中选择一张。

• JavaScript 这个方式在上一篇文章中有介绍
• Server side delivery
• CSS media queries  这个方式在上一篇文章中有介绍
• Built-in browser features (image-set(), <img srcset>)

以下具体的介绍每种方式

1.压缩高分辨率的图片

先看一下由 ImageMagick工具生成几组图片，

非常明显的能够看出 hq1x和ULQ2x（第一行第一个和第二行第三个比較）的图片的大小差点儿相同，可是明显ulq2x的效果要好于hq1x。

当然quality 90比quality 20的清晰度要高。

而採用quality 20就是一种权衡的做法了。大小和清晰度的权衡。

这样的详细的做法仅仅针对jpeg格式的图片。其它格式的类似的权衡 many tradeoffs參考这个。

总结

1.能使用SVG和CSS就不使用位图

2.背景图片使用 image-set方式，而且正确的处理回调方法，已适配不支持 image-set方式的浏览器

3.假设能够牺牲图片的质量那么考虑使用 压缩高分辨率的图片的方式。

4.内容图片使用 srcset polyfill, or fallback to using image-set （有兴趣的自己能够看看）。