好程式員web前端分享主流CSS image比較

　　好程式員web前端分享主流CSS image比較在還原設計圖的時候，難免會碰到一些樣式圖檔的引用。如何來對這些圖檔做優化呢?本文簡單的梳理了一下目前幾種比較常用的使用方式。

　　注：

　　1. 有更好的方法的話，歡迎補充。

　　2. 下文未對性能問題做真實的測試，請保持一顆好奇的心，并告訴我們

　　CSS Sprite

　　這是目前使用比較多的方式。也是我個人認為相對最優的一種解決方式。當然，這裡的最優指的是特定環境。比如移動用戶端，就不一定要這麼幹。CSS Sprite 是将頁面中所使用到的小圖檔整合到一張大圖上去。大家都知道，用戶端向伺服器發送請求是很有代價的，特别是在移動端，是以，sprite 的提出是為了減少 http 請求數，進而加快頁面加載速度。

　　使用方式 先将小圖檔整合到一張大圖上 css 引入背景圖檔 然後依據圖示的位置使用 background-position 進行定位 使用技巧 切圖的時候就構思拼接好圖檔(不然後期抓心撓肺的，當然，善用工具的出門右轉) 排序有序，便于後期維護(個人建議圖示從上到下排列)。有利于 background-position 定位 定位時避免使用 right, bottom 等(後期圖檔尺寸變化後就不一定了好不) 合理預留白白位置(空太多檔案變大，太小引起圖示重疊) 優點 減少 http 請求。(這個是最大的優點) 對你存在的圖檔一目了然(不知道這個算不算，如改進版3.0拿到的圖哪些圖示是之前已存在不需要重新切了的) 缺點 圖檔合并定位費時費力(誰用誰知道啊) 其它 github 上有個 grunt 合并 sprite 的元件，可以看看 image data URI

　　即将圖檔資源轉換為 base64 字元串格式嵌到頁面或樣式中。這樣連圖檔的請求連結都省了。

　　如：

　　使用方式/ 資料格式 /

1.data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

　　/ 樣式引用 /

1.

　　.icon{

2.

　　width: 30px; height: 30px;

3.

　　background-image: 

4.url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);

5.

　　}

标簽文法： data : 取得資料協定 image/png : 取得資料的協定名稱(注意這裡也圖檔資源也可以使用字型等) base64 : 資料編碼方式 iVBOR... : 編碼後資料

　　Base64編碼 自行百度科普吧。

　　優點 減少 HTTP 請求 避免某些檔案跨域 無圖檔緩存等問題(但是一般 css 也是有緩存的好不好) 缺點 相容性 ( IE6,7 不相容, 可以使用 MHTML 來解決 ) 浏覽器不會緩存該圖檔(這裡是否是這樣我存有疑惑，因為好像看上去也是第一次加載的時候慢) 增加 css 檔案大小 編碼成本及維護(展示不直覺，目前需手動轉換，我暫時不知道自動替換之類的插件) 之前有看到過篇測評說性能上比 sprite 微弱一些，一時間找不到連結

　　綜合起來，data URI可以使用在

　　* 圖檔尺寸很小，使用一條 http 請求有點浪費，如漸變背景框

　　* 圖檔在全站大規模使用，且很少被更新的，如 loading 圖

　　線上轉換工具 Encode Data URL image to data URI 更新 github 資源 sus 可轉換 data URI 參考資料 MDN - data URIs icon fonts

　　由于移動端裝置擁有不同分辨率，PPI 等引起的問題， 常常需要針對不同螢幕分辨率來調整優化，如使用 @2x 圖檔， max-width 限制等。

　　采用 css @font-face 用來顯示 icon 也不失為一種好辦法。

　　因為 icon fonts (字型)是矢量圖形，是以不受分辨率的影響，同時可以做到完美縮放;當然，也可使用在 WEB 端。

　　優點 檔案小 加載性能好 支援 css 樣式 IE6/7 下也支援 缺點 樣式限制，使用扁平化風格 移動端還存在不相容問題 (相容表，作者不詳) 少量移動裝置和 icon fonts 字元編碼沖突 FF和 IE9 下跨域問題 性能問題 使用方法 制作字型檔案

　　可以利用字型工具手動制作 也可以利用線上工具自動生成 在 css 中引用，如下

　　引入字型檔案

　　@font-face {font-family: 'iconfont';

　　src: url('iconfont.eot'); / IE9/

　　src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 

3.*/

4.

　　url('iconfont.woff') format('woff'), / chrome、firefox /

　　url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, 

6.Android, iOS 4.2+*/

7.

　　url('iconfont.svg#uxiconfont') format('svg'); / iOS 4.1- /

8.

　　再定義一個 icon-* 通配我們所有圖示的共有 CSS 樣式，

　　[class^="icon-"], [class*=" icon-"] {

　　display: inline-block;

　　speak: none

　　font-family: "iconfont";

　　font-size: 16px;

　　line-height: 1;

6.

　　font-style: normal;

　　/* 字型圖示出現鋸齒的問題： /

　　-webkit-font-smoothing: antialiased;

9.

　　-moz-osx-font-smoothing: grayscale;

10.

　　最後是利用 :before 來注入每個 icon 對應的字型編碼

　　.icon-bell:before {

　　content: "003432";

　　.icon-search:before {

　　content: "003433";