摘要：如何來對(duì)這些圖片做優(yōu)化呢本文簡(jiǎn)單的梳理了一下目前幾種比較常用的使用方式。下文未對(duì)性能問題做真實(shí)的測(cè)試，請(qǐng)保持一顆好奇的心，并告訴我們這是目前使用比較多的方式。也是我個(gè)人認(rèn)為相對(duì)最優(yōu)的一種解決方式。采用用來顯示也不失為一種好辦法。

在還原設(shè)計(jì)圖的時(shí)候，難免會(huì)碰到一些樣式圖片的引用。如何來對(duì)這些圖片做優(yōu)化呢？本文簡(jiǎn)單的梳理了一下目前幾種比較常用的使用方式。
注：
1. 有更好的方法的話，歡迎補(bǔ)充。
2. 下文未對(duì)性能問題做真實(shí)的測(cè)試，請(qǐng)保持一顆好奇的心，并告訴我們

CSS Sprite

這是目前使用比較多的方式。也是我個(gè)人認(rèn)為相對(duì)最優(yōu)的一種解決方式。當(dāng)然，這里的最優(yōu)指的是特定環(huán)境。比如移動(dòng)客戶端，就不一定要這么干。CSS Sprite 是將頁(yè)面中所使用到的小圖片整合到一張大圖上去。大家都知道，客戶端向服務(wù)器發(fā)送請(qǐng)求是很有代價(jià)的，特別是在移動(dòng)端，所以，sprite 的提出是為了減少 http 請(qǐng)求數(shù)，從而加快頁(yè)面加載速度。

使用方式

先將小圖片整合到一張大圖上

css 引入背景圖片

然后依據(jù)圖標(biāo)的位置使用 background-position 進(jìn)行定位

使用技巧

切圖的時(shí)候就構(gòu)思拼接好圖片（不然后期抓心撓肺的，當(dāng)然，善用工具的出門右轉(zhuǎn)）

排序有序，便于后期維護(hù)(個(gè)人建議圖標(biāo)從上到下排列)。有利于 background-position 定位

定位時(shí)避免使用 right, bottom 等（后期圖片尺寸變化后就不一定了好不）

合理預(yù)留空白位置（空太多文件變大，太小引起圖標(biāo)重疊）

優(yōu)點(diǎn)

減少 http 請(qǐng)求。（這個(gè)是最大的優(yōu)點(diǎn)）

對(duì)你存在的圖片一目了然（不知道這個(gè)算不算，如改進(jìn)版3.0拿到的圖哪些圖標(biāo)是之前已存在不需要重新切了的）

缺點(diǎn)

圖片合并定位費(fèi)時(shí)費(fèi)力（誰(shuí)用誰(shuí)知道?。?/p> 其它

github 上有個(gè) grunt 合并 sprite 的組件，可以看看

image data URI

即將圖片資源轉(zhuǎn)換為 base64 字符串格式嵌到頁(yè)面或樣式中。這樣連圖片的請(qǐng)求鏈接都省了。
如：

使用方式

/** 數(shù)據(jù)格式 **/
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

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

標(biāo)簽語(yǔ)法：

data : 取得數(shù)據(jù)協(xié)議

image/png : 取得數(shù)據(jù)的協(xié)議名稱（注意這里也圖片資源也可以使用字體等）

base64 : 數(shù)據(jù)編碼方式

iVBOR... : 編碼后數(shù)據(jù)

Base64編碼 自行百度科普吧。

優(yōu)點(diǎn)

減少 HTTP 請(qǐng)求

避免某些文件跨域

無圖片緩存等問題(但是一般 css 也是有緩存的好不好)

缺點(diǎn)

兼容性 （ IE6,7 不兼容, 可以使用 MHTML 來解決 ）

瀏覽器不會(huì)緩存該圖片（這里是否是這樣我存有疑惑，因?yàn)楹孟窨瓷先ヒ彩堑谝淮渭虞d的時(shí)候慢）

增加 css 文件大小

編碼成本及維護(hù)(展示不直觀，目前需手動(dòng)轉(zhuǎn)換，我暫時(shí)不知道自動(dòng)替換之類的插件)

之前有看到過篇測(cè)評(píng)說性能上比 sprite 微弱一些，一時(shí)間找不到鏈接

綜合起來，data URI可以使用在
* 圖片尺寸很小，使用一條 http 請(qǐng)求有點(diǎn)浪費(fèi)，如漸變背景框
* 圖片在全站大規(guī)模使用，且很少被更新的，如 loading 圖

在線轉(zhuǎn)換工具

Encode Data URL

image to data URI

更新

github 資源 sus 可轉(zhuǎn)換 data URI

參考資料

MDN - data URIs

icon fonts

由于移動(dòng)端設(shè)備擁有不同分辨率，PPI 等引起的問題， 常常需要針對(duì)不同屏幕分辨率來調(diào)整優(yōu)化，如使用 @2x 圖片， max-width 限制等。
采用 css @font-face 用來顯示 icon 也不失為一種好辦法。
因?yàn)?icon fonts (字體)是矢量圖形，所以不受分辨率的影響，同時(shí)可以做到完美縮放；當(dāng)然，也可使用在 WEB 端。

優(yōu)點(diǎn)

文件小

加載性能好

支持 css 樣式

IE6/7 下也支持

缺點(diǎn)

樣式限制，使用扁平化風(fēng)格

移動(dòng)端還存在不兼容問題 (兼容表，作者不詳)

少量移動(dòng)設(shè)備和 icon fonts 字符編碼沖突

FF和 IE9 下跨域問題

性能問題

使用方法

制作字體文件

可以利用字體工具手動(dòng)制作

也可以利用在線工具自動(dòng)生成

在 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- */
    }

再定義一個(gè) icon-* 通配我們所有圖標(biāo)的共有 CSS 樣式，

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

最后是利用 :before 來注入每個(gè) icon 對(duì)應(yīng)的字體編碼

    .icon-bell:before {
      content: "