首页 > 代码库 > Retina时代的前端视觉优化

Retina时代的前端视觉优化

随着New iPad的发布,平板也将逐渐进入Retina时代,在高分辨率设备里图片的显示效果通常不尽人意,为了达到最佳的显示效果就需要对图片进行优化,这里介绍一些优化方法:

一、用CSS替代图片

这一点在任何时候都适用;只是在当前我们可以更多的使用样式表来制作出设计效果,CSS3的圆角、渐变、模盒阴影、字体阴影能帮助我们处理绝大多数视觉效果,并且在各种分辨率下都有良好的表现。

CSS Button

二、为高分辨率设备提供高清图片

如果必须使用图片,通常是准备2套图片,一套原始尺寸( 为普通设备准备 ),一套两倍尺寸( 为高分辨设备准备 ),再根据设备的分辨率调用不同的图片,调用的方式有2种:

1.使用CSS媒体查询( CSS media queries ),适用于根据不同分辨率来加载不同的背景图片
内联样式:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){         /* 2倍分辨率 执行样式*/}

外链样式:

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

2.使用Javascript替换图片地址,适用于<img>标签加载的外链图片
首先使用 window.devicePixelRatio 来判断是否为高分辨率,然后替换图片的地址。

想了解此方法的细节,可以参考下这篇分析apple.com方案的文章:
http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/ 
下面是文中提到的 image_replacer.js 源码:
https://gist.github.com/2029936

三、 Icon优化

独特的Icon是大多数网站必备的设计元素,常规的处理方式是使用 sprite 技术,配合上面介绍的 CSS media queries 方法达到最优的显示效果,除此之外前端工程师也在探索一些新的优化方式:

1.Icon Fonts
将图标制作成特殊的字体,然后使用CSS3的自定义字体(@font-face)调用

优点:

  • 文件体积小,一般20-50kb;
  • 图标可以通过CSS更改尺寸和颜色,添加阴影,hover颜色等。

缺点:

  • 制作成本较高,你需要矢量图形处理软件和专业的字体制作软件;
  • 不易维护,不同浏览器支持的字体格式不一样,需要制作多份。

一些现成的Icon Fonts资源,基本可满足常规的设计需求:

  • MODERN PICTOGRAMS
  • Font-Awesome
  • Social Media Icons Pack
  • PulsarJS @FontFace
  • ClickBits Web Icon System( 需付费 )

如果你对Icon Fonts的制作方法感兴趣可以参考这篇文章《CSS3 icon font完全指南》:
http://www.qianduan.net/css3-icon-font-guide.html

2.CSS Icon
与Icon Fonts思路类似,不同的是使用CSS来制作各种图标

优点:

  • 文件体积小,尺寸与Icon Fonts相当
  • 同样可以随意修改尺寸和颜色,添加阴影等。
  • 修改方便,调用灵活

缺点:

  • 受限于浏览器渲染能力,在不同浏览器中表现不一

资源:

  • Pure CSS GUI icons

关于CSS Icon的制作会在以后做介绍( 先挖个坑=。= )

3.SVG Icon
SVG是一种可伸缩矢量图形,调用方式和jpg、png等格式图片一样,通过CSS即可加载:

background-image: url(‘sprite.svg‘);

优点:

  • 文件体积小,因为SVG是XML格式定义图形,所以可压缩性更高
  • 在缩放时图形质量不会有所损失
  • 可以用来动态生成图形

缺点:

  • 同样受限于浏览器,支持SVG的浏览器有:Internet Explorer 9+、Firefox 4+、Chrome 4+、Safari 4+、Opera 9.5+

四、Canvas图片处理

这个方法有点偏门,来自嗷嗷的一篇文章:Retina 显示屏下 @2x 图片的模拟

优点

  • 大部分图片效果比原来好,不用做@2x 的图片
  • 多终端统一维护,脚本渐进增强
  • 文件小省带宽,3G 时还是有一定的优势 用EDGE的就更不用说了。

缺点

  • 效果真心没 @2x的好,当然如果有更好的算法也难说
  • canvas 读图片数据存在跨域问题
  • 锐化目前的实现,基本就是读点的操作,大图片手机估计吃不消

写在最后

达到高分辨率下最佳的视觉效果固然不错,但加载速度也是用户体验重要指标之一。所以有时候我们也要在优质与高速之间找一个平衡点,这里可以通过 navigator.connection 来判断用户的网络环境,如果是EDGE那还是斟酌下是否要给用户提供高清图片。

Retina时代的前端视觉优化