`

说说 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下性能提升明显.

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










2
2
分享到:
评论
2 楼 fins 2011-03-07  
你这是疑问还是反问? 没明白

把padding margin border 这些都设置正确的话 是可以塞满的
1 楼 foxty 2011-03-07  
那这样讲的话,一张480x320的图片就直接可以塞满ip3和ip4的屏了?

相关推荐

    image-set实现Retina屏幕下图片显示详细介绍

    在Web开发中,面对Retina屏幕(具有高像素密度的显示屏)的挑战,如何确保图片在这些屏幕上清晰显示成为了一个关键问题。`image-set`是一个CSS函数,旨在解决这个难题,尤其是在不支持此功能的浏览器中,它会回退到...

    IOS圆角图标,PSD文件

    此外,考虑到不同设备的屏幕分辨率,图标需要有适当的适应性,以确保在各种尺寸下都能清晰显示。最后,设计师还需要考虑在深色和浅色背景下,图标的可读性和视觉效果,确保图标在不同场景下的表现力。 综上所述,...

    IOS Web Clip 代码保存内容到手机桌面

    【iOS Web Clip】是苹果iOS系统提供的一种功能,允许用户将特定的网页或者Web应用程序作为一个图标保存在手机主屏幕上,类似于创建一个快捷方式,方便快速访问。这种技术主要基于Safari浏览器,使得用户无需每次都...

    IOS手机整站自适应触屏

    4. **iOS设备特性**:考虑iOS设备的特性,例如高分辨率的Retina显示屏,需要提供高清图片资源。同时,要考虑到不同版本iOS的兼容性问题,尤其是JavaScript和CSS的兼容性。 5. **性能优化**:为了保证在移动设备上的...

    Web开发者和设计师必须要知道的iOS8十个变化.pdf

    iOS 8作为苹果公司的重要系统更新,为Web开发者和设计师带来了诸多改变,特别是在Safari浏览器和移动设备体验方面。以下是iOS 8的十个关键变化: 1. **Safari更新**:iOS 8中的Safari引入了对HTML5新API的支持,如...

    iOS programming

    - Retina是苹果公司设计的一种显示技术,它能通过高分辨率提供更清晰的图像。 - Safari是苹果公司开发的网页浏览器。 - Xcode是苹果公司提供的一套完整的集成开发环境,它包含了构建应用程序所需的所有工具。 书中...

    Sketch-icon-template:网络图像的尺寸和草图模板

    网络品牌图片尺寸 网络图像的尺寸:图标、个人资料、徽标和横幅图像 将所有不同网站和图像作为预定义画板的草图模板 图标 16x16px 网站图标基础 24x24px固定在 IE9 中的网站 29x29 iOS 设置图标(非 Retina) 32x32...

    苹果手机网页模版

    3. **高分辨率支持**:考虑到苹果设备的Retina显示屏,模版需提供高清图像和图标,以保证在高分辨率屏幕上显示细腻无像素化。 4. **触摸友好**:苹果手机主要通过触控操作,模版设计时需考虑手指操作的便捷性和舒适...

    移动端开发常见问题总结

    这些链接标签用于指定不同设备和分辨率下显示的启动图片。注意,对于Retina屏幕,需要额外减去状态栏高度(20px 或 40px)以获得最佳显示效果。 通过上述介绍,我们可以看到,在移动端开发中,合理利用HTML5中的...

    手机wap源码模板 (543).zip

    接下来是一系列的`apple-touch-icon`文件,它们是针对苹果设备的触控图标,用于在iOS设备的主屏幕快捷方式和Safari书签中显示。这些图标有不同的尺寸以适应不同分辨率的设备,例如`144x144-precomposed.png`是为...

    TOBrowserActivityKit:一组UIActivity子类,用于在Chrome或Safari中打开NSURL对象

    程序性图形还意味着较旧版本的图形(即iOS 6)在运行时是完全可选的(即不再有多余的图像文件!) 技术要求 iOS 6.0或更高版本。 执照 版权所有2014 Timothy Oliver。 版权所有。 特此免费授予获得此软件和相关...

    iPhone4 4.3X 透明状态栏

    在iOS开发中,@2x通常表示高分辨率的图像,适用于Retina显示屏的设备,比如iPhone 4。这类图像文件可能包括了状态栏的各种状态(如信号、电池图标)的透明版本,开发者或用户可以通过替换系统默认的图标来实现透明...

    移动端兼容问题

    - 针对Retina等高分辨率屏幕,图片应切成2倍尺寸,然后通过CSS的`background-size`属性将图片尺寸设为其原尺寸的一半,以保持清晰度。 - 其他元素尺寸也需要相应减半,比如40px的设计稿字体,在CSS中应设置为20px...

    js仿WebQQ整合苹果菜单界面

    此外,为了保证在苹果设备上的良好运行,开发者需要考虑iOS系统的特性,如Safari浏览器的兼容性、Retina屏幕的高分辨率显示以及苹果特有的手势操作。js目录中的脚本可能包含了针对这些特性的优化代码,比如使用media...

    Force Touch是什么.docx

    在Apple Watch上,Force Touch通过围绕Retina显示屏周围的微小电极感知轻点和按压的区别。这些电极能够检测到用户在触控面板上的力道,并据此提供不同的功能或操作。Apple Watch不仅能识别简单的触碰,还能感知力度...

    iPhone 开发知道

    - **Retina显示屏**:960x640像素分辨率,每英寸326像素,这使得屏幕上的文字和图像看起来异常清晰细腻。 - **摄像头**:5百万像素后置摄像头支持LED闪光灯、高清视频录制等功能,前置VGA分辨率摄像头支持FaceTime。...

    iPhone狂:约会iPhone

    2010年6月7日发布的iPhone 4是首款采用Retina显示屏的iPhone,其像素密度高达326ppi,使得屏幕显示更加清晰细腻。此外,iPhone 4还引入了前后摄像头设计,极大地方便了用户的视频通话需求。 #### 3. iPhone X 2017...

    The new iPad七大软件全解读 极致体验.docx

    以及针对新硬件特性的游戏或多媒体应用,充分利用Retina显示屏和更强的处理器性能。 总的来说,"The new iPad"的七大软件不仅丰富了其功能,而且极大地提升了用户的使用体验,将平板电脑的功能性和娱乐性推向了新的...

    苹果手机app应用网页模板

    3. **高分辨率素材**:苹果设备通常具有较高的像素密度,因此模板中的图片和图形需要提供高清版本,以确保在Retina屏幕上看起来清晰无锯齿。 4. **Safari优化**:作为苹果设备的默认浏览器,Safari的特性和性能需要...

Global site tag (gtag.js) - Google Analytics