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那仍是斟酌下是否要給用戶提供高清圖片。