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

我在简析HTML5canvas在retina屏(视网膜屏幕,如iphone4)设备上的优化一文中提到了一点关于safari和retina屏的问题.

不过那篇文章说的比较乱,而且举的例子有点复杂.

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

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

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

下面举个简单的例子.

我现在有一张图片,大小是120px*120px,在网页中这样显示:

<imgwidth="120"height="120"src="normal.jpg"/>

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

会看到视觉上一样大小的两张图.

而不会因为ip4高分辨率,就看到很小的图.

之所以这样,就是因为ip4显示图像时,对图像做了放大处理.

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

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

那么我要怎样在ip4下看到和ip3下一样大小的图片,保证性能和效果呢?

答案就是:

1先准备一张大小*2的清晰大图(big.jpg,240*240),

2img标签这样写:

<imgwidth="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而言,这种优化处理意义未必大,但是对于canvahtml5动画一类的应用则很有意义.

我的html5游戏引擎优化后在ip4下性能提升明显.

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