　　 好程式設計師 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';

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

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

3. */

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

5. 　　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-"] {

1. 　　display: inline-block;

2. 　　speak: none

3. 　　font-family: "iconfont";

4. 　　font-size: 16px;

5. 　　line-height: 1;

6. 　　font-style: normal;

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

8. 　　-webkit-font-smoothing: antialiased;

9. 　　-moz-osx-font-smoothing: grayscale;

10. 　　}

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

1. 　　content: "\003432";

2. 　　}

3. 　　.icon-search:before {

4. 　　content: "\003433";

5. 　　}

好程式設計師web前端分享主流CSS image比較

相關文章