資訊專欄INFORMATION COLUMN
摘要：如何來對這些圖片做優化呢本文簡單的梳理了一下目前幾種比較常用的使用方式。下文未對性能問題做真實的測試，請保持一顆好奇的心，并告訴我們這是目前使用比較多的方式。也是我個人認為相對最優的一種解決方式。采用用來顯示也不失為一種好辦法。
在還原設計圖的時候，難免會碰到一些樣式圖片的引用。如何來對這些圖片做優化呢？本文簡單的梳理了一下目前幾種比較常用的使用方式。
注：
1. 有更好的方法的話，歡迎補充。
2. 下文未對性能問題做真實的測試，請保持一顆好奇的心，并告訴我們
這是目前使用比較多的方式。也是我個人認為相對最優的一種解決方式。當然，這里的最優指的是特定環境。比如移動客戶端，就不一定要這么干。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 下跨域問題
性能問題
使用方法制作字體文件
可以利用字體工具手動制作
也可以利用在線工具自動生成
在 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: "