为视网膜显示屏优化网页上的图片

03.20.2012, UI Design, by , 1,853 views.

现在 iPad 也有视网膜屏幕 (retina display)了。正是依赖这视网膜显示屏,iPhone 4 的分辨率达到了640×960 pixel,iPad 的分别率达到了 1536 x 2048 pixel。不过为了保持向下兼容性,iOS 在网页上仍然是 320 × 480 point 和 768 x 1024 point。

也就是说,在不进行缩放的情况下,显示普通图片时,它会用4个像素来显示图片中的1个像素;而在显示retina图片时,每个像素都对应图片中的1个像素。这样网页上面的图片就会模糊了。文字却没有这个问题,因为文字是适量的。也就是说要解决图片模糊这个问题可以用 svg 适量图片来替换。

iOS 用 SDK 开发 iOS 应用时,只要将图片名加上“@2x”后缀,就能让支持retina display的设备自动显示这个解析度更高的图片。但 Safari 等使用 UIWebView 的应用在展示图片时,却无法利用这个特性,因为这样会造成大量没必要的HTTP请求。

不过解决这个问题的方两种一种是用大小为原图的 2 倍尺寸的图片来缩小来显示,另外一种就是直接使用 svg 适量图片。

方法一:先来看看用原图大小2倍缩小的方法:

如果图片是直接用 HTML 的 img 标签显示,假如 图片的大小是 60 x 60 px 的那么在 img 标签里面的尺寸就不能是 60 x 60 px,而必须是30 x 30 px。

请看下面的演示效果:

HTML:

原始30x30 的图片

图1

图1 为原始30×30 的图片。

图2

图2 为原始 60×60 的图片缩小后的预览。

CSS:

如果是用做 CSS 背景图片那么就要设置 background-size 属性了,如:

background-size:30px 30px;

示例如下:

图3 为原始30×30 的背景图片。

图4 为原始 60×60 的背景图片设置 background-size 后的效果。

使用 iPhone 4或者 新款的iPod 浏览本文就很清晰的发现这两个图片的显示问题了。

方法2: 就是直接使用 svg 格式的适量图片了。

使用方法:
<img src="icon.svg" width="30px" height="30px" alt="" />

background: url(icon.svg) no-repeat;

如果你是为了节约流量那么只准备一套大尺寸的图片就行了,然后直接使用方法一中的方法缩小图片显示尺寸就行了。

要是你想面面俱到的话那就准备2两套图片吧。

在网页中,pixel 与 point 比值称为 device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5。你就可以用 css 的media 查询来做判断加载哪套图片了。css media 查询的代码如下:

<link rel="stylesheet" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"/>

或者:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}

另外推荐一个制作 svg 的软件,那就是 Linux 下大名鼎鼎的 GIMP。这个软件 也有 Windows 和 Mac 的版本,下载地址为:http://www.gimp.org/downloads/

这个软件被称之为 Linux 下的 PhotoShop。也可把图片转换为 svg 适量图。

补充:做图和切图的时候,图片最好为 2 的倍数,也就是说切图的时候尽量使用偶数。基数不能被整除,坐标这些会出问题。

用移动设备快速阅读本文:
请扫描二维码 -->

作者:

简介: 此人一个喜欢科幻的家伙,包括科幻游戏和科幻电影以及相关题材的东东。知名 WordPress 主题 iStudio Theme 的作者。UI 行业从业者,从事 GUI 和 WUI 相关设计并且坚持原创的设计师。

19则回应给为视网膜显示屏优化网页上的图片

  1. 回复

    还有一点,图片最好为 2 的倍数,也就是说切图的时候尽量使用偶数。基数不能被整除,坐标这些会出问题。

  2. Gimee 说:
    回复

    :roll: 奇数!

  3. 回复

    我总看不出,4S的视网膜屏幕和iPhone4的区别!!!

  4. 引用: 移动应用视觉稿 : yan's blog

  5. 引用: 手机网页 | yan's blog

  6. 回复

    svg还是用inkcape好

  7. qzuser 说:
    回复

    矢量

  8. qzuser 说:
    回复

    矢量

  9. yuur369 说:
    回复

    也就是说,如果要想得到最佳效果,要么使用矢量图,要么准备两套图片,然后在CSS文件中@media标签来控制显示哪张图片是吧。

  10. yuur369 说:
    回复

    也就是说,如果要想得到最佳效果,要么使用矢量图,要么准备两套图片,然后在CSS文件中@media标签来控制显示哪张图片是吧。

  11. yuur369 说:
    回复

    是这样的。。我网页中有一张背景图片,然后我在css中@media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1) { .head{ height:50px; background-image:url(title.png); width:843px;}}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .head{ height:100px; background-image:url(title@2x.png); width:1686px; }}然后webview的宽度我也是定义为843的。ipad1中窗口大小和图片大小一致,显示正常,但是在new ipad中,感觉窗口大小和ipad1中一样,而图片却是1686px了。就是说我只有拖动滚动条才能看到图片的全部面目。这是怎么回事啊?

  12. yuur369 说:
    回复

    是这样的。。我网页中有一张背景图片,然后我在css中@media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1) { .head{ height:50px; background-image:url(title.png); width:843px;}}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .head{ height:100px; background-image:url(title@2x.png); width:1686px; }}然后webview的宽度我也是定义为843的。ipad1中窗口大小和图片大小一致,显示正常,但是在new ipad中,感觉窗口大小和ipad1中一样,而图片却是1686px了。就是说我只有拖动滚动条才能看到图片的全部面目。这是怎么回事啊?

  13. 引用: 用户生成内容的网站需要怎样应对 Retina display? - web前端开发 - 开发者问答

发表评论

电子邮件地址不会被公开。 必填项已用*标注


使用腾讯微博登陆

使用新浪微博登陆