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

Posted on by

现在 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 的倍数，也就是说切图的时候尽量使用偶数。基数不能被整除，坐标这些会出问题。

引自：xuui.net

发表评论