主流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 字符串格式嵌到頁面或樣式中。這樣連圖片的請求連接都省了。
如：

使用方式

/** 數據格式 **/
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

/** 樣式引用 **/
.icon{
    width: 30px; height: 30px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);
}

標籤語法：

• 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 下跨域問題
• 性能問題

使用方法

1. 製做字體文件
   
   
   • 能夠利用字體工具手動製做
   • 也能夠利用在線工具自動生成
2. 在 css 中引用，以下

引入字體文件

@font-face {font-family: 'iconfont';
        src: url('iconfont.eot'); /* IE9*/
        src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('iconfont.woff') format('woff'), /* chrome、firefox */
        url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
    }

再定義一個 icon-* 通配咱們全部圖標的共有 CSS 樣式，

[class^="icon-"], [class*=" icon-"] {
      display: inline-block;
      speak: none
      font-family: "iconfont";
      font-size: 16px;
      line-height: 1;
      font-style: normal;
      /** 字體圖標出現鋸齒的問題： */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

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

.icon-bell:before {
      content: "\003432";
    }
    .icon-search:before {
      content: "\003433";
    }

資源推薦

• 阿里巴巴矢量圖標庫
• icnMoon
• font awesome

參考資料

• icon fonts 的探析及應用

其它一些想法

• SVG繪圖
• HTML5 離線文件
• localStorage 存儲