萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS中使用image data URI來處理圖片的方法

CSS中使用image data URI來處理圖片的方法

   即將圖片資源轉換為 base64 字符串格式嵌到頁面或樣式中。這樣連圖片的請求鏈接都省了。

  如:

  使用方式

  CSS Code復制內容到剪貼板

  /** 數據格式 **/

  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAA

lwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8

QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

  /** 樣式引用 **/

  .icon{

  width: 30px; height: 30px;

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAA

lwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK

8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);

  }

  標簽語法:

  data : 取得數據協議

  image/png : 取得數據的協議名稱(注意這裡也圖片資源也可以使用字體等)

  base64 : 數據編碼方式

  iVBOR... : 編碼後數據

  優點

  減少 HTTP 請求

  避免某些文件跨域

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

  缺點

  兼容性 ( IE6,7 不兼容, 可以使用 MHTML 來解決 )

  浏覽器不會緩存該圖片(這裡是否是這樣我存有疑惑,因為好像看上去也是第一次加載的時候慢)

  增加 css 文件大小

  編碼成本及維護(展示不直觀,目前需手動轉換,我暫時不知道自動替換之類的插件)

  之前有看到過篇測評說性能上比 sprite 微弱一些,一時間找不到鏈接

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

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

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

copyright © 萬盛學電腦網 all rights reserved