Retina时代的前端视觉优化

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

1、用CSS替代图片

这一点在任什么时候候都适用；只是在当前咱们能够更多的使用样式表来制做出设计效果，CSS3的圆角、渐变、模盒阴影、字体阴影能帮助咱们处理绝大多数视觉效果，而且在各类分辨率下都有良好的表现。

CSS Button

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

若是必须使用图片，一般是准备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

3、 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+

4、Canvas图片处理

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

优势

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

缺点

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

写在最后

达到高分辨率下最佳的视觉效果当然不错，但加载速度也是用户体验重要指标之一。因此有时候咱们也要在优质与高速之间找一个平衡点，这里能够经过 navigator.connection 来判断用户的网络环境，若是是EDGE那仍是斟酌下是否要给用户提供高清图片。