说说 iOS safari在retina屏下显示图像的原理

我在 简析 HTML5 canvas在retina屏(视网膜屏幕,如iphone4)设备上的优化 一文中提到了一点关于 safari和retina屏的问题.
不过那篇文章说的比较乱 ,而且举的例子有点复杂.

今天梳理了一下思路, 重新来聊聊这个话题.

还是先引用前文的一段话:

引用

ip4的safari浏览器在展现图像(如img, canvas, backgroundImage)时, 为了得到和传统屏幕一样的视觉大小, 会将原始像素放大1倍.(retina屏幕的像素更小,可以理解为4个retina像素表示1个传统像素).

ip4在进行这种放大时,并不是简单的 将1*1像素 变成2*2像素, 而是会进行"复杂的放大算法", 目的是得到更加平滑自然(类似抗锯齿)的图像.
虽然这种放大操作是native的,但还是会导致渲染图像时性能变得低下.

(这里所说的性能低下 不是想当然的, 是经过多人多次多种测试用例测试后得出的结果)


下面举个简单的例子.
我现在有一张图片, 大小是 120px*120px, 在网页中这样显示:

<img width="120" height="120" src="normal.jpg" />

现在我们拿出 iphone3 和 iphone4 (这两个我都没有 :'(  ), 访问这个页面

会看到 视觉上一样大小的 两张图.
而不会因为  ip4 高分辨率, 就看到很小的图.
之所以这样, 就是因为ip4显示图像时,对图像做了放大处理.

============================================

ip4比ip3有更强大的硬件性能, 但是就是因为这一放大,导致性能变低了,而且ip4的放大算法会让图片看起来有一点点模糊(要仔细看,做了抗锯齿/平滑处理).


那么我要怎样在ip4下看到 和 ip3 下一样大小的图片,保证性能和效果呢?
答案就是:
1 先准备一张 大小*2的清晰大图 (big.jpg, 240*240 ),
2 img标签这样写:
<img width="120" height="120" src="big.jpg" />

是的 你没有看错, img的宽高依然不变.
此时这个img标签实际上显示的是一个"缩小的big.jpg".

但对于ip4而言, 此时效果更好,性能更高.
因为ip4 发现自己要显示的图像是一个被强制缩小50%的图像时, 它不会去缩小,也不会去放大,而会以1:1像素比例直接绘制原图(big.jpg)


我这么说可能效果不明显, 有ip3和ip4的朋友, 可以访问下面的链接 来看看效果

http://data.wiyun.com/finscn/retina/r-test.html


当然 这么做也有缺点, 就是需要更大的图片,耗用更多的带宽和内存.
不过带来的好处是 效果更好 速度更佳.

本文为了更便于理解,使用img做了例子, 其实对于img而言,这种优化处理意义未必大, 但是对于canva html5动画一类的应用则很有意义.
我的html5 游戏引擎优化后 在ip4下性能提升明显.

最终如何取舍 看需求而定了.