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