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="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那还是斟酌下是否要给用户提供高清图片。