适配高分辨率的图片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  （有兴趣的自己可以看看）。