嵌入式內聯圖片

　　嵌入式內聯圖片是將編碼後的資料類型小圖片用 Data URL 寫入檔案中，例如在 .css、.html、.js...等，相對於以往慣用透過連結方式引入圖片，其好處是減少 HTTP 請求，提升網站速度。但編碼後的圖片會使檔案變得肥大，要啟用 GZIP 壓縮( GZIP Components)，伺服器端在收到 HTTP 請求(HTTP Requests)後(例如含 base64 的 CSS 檔案)，會先行壓縮檔案內容，然後才傳送到客戶端。

　　IE 9 版本支援 Data URL；IE 8 雖支援但有大小限制，編碼後的內容不能大於32KB；IE 7 支援與否視乎核心版本，不支援 Data URL 的可以用 MHTML 方案來解決。

　　以下是各 IE 核心下的支援測試結果：

IE 9 核心	IE 9	IE 8 模式	IE 7 模式	相容性檢視
Data URL	yes	yes	yes	yes
MHTML	no	no	no	no
IE 8 核心	IE 8	---	IE 7 模式	相容性檢視
Data URL	yes	---	yes	yes
MHTML	yes	---	yes	yes
IE 7 核心	IE 7
Data URL	no
MHTML	yes

　　從上表可見，IE 7 在不同核心瀏覽器下的支援不盡相同，為解決不同核心 IE 7 支援問題，要 Data URL 與 MHTML 併用，但如此一來又使檔案變得肥上加肥，若沒有啟用 GZIP 之下使用，便會適得其反。反觀同樣可減少 HTTP 請求的 CSS Sprites 就突顯優點，而且相容性好，但也非無缺點，在人為合併延伸與非延伸性圖片時，需要估量圖片之間的距離、位置，再為 background-position 定位，尤為費時。

　　以下兩個窗口分別用不同檔案嵌進來，支援 Data URL 的瀏覽器( firefox、chrome、safari、opera、IE 8 以上 )會看到左邊的結果；IE 8 核心的任何模式，兩邊皆可見；IE 7 核心會看到右邊結果。

Data URL檔案不存在

MHTML檔案不存在

【2021年更新】因遷離虛擬主機關係，暫未能補上檔案。

　　瀏覽器載入網頁時，不會將內聯圖片暫存下來，當瀏覽另一個含相同圖片的頁面時，不會從快取中調用圖片，而是重新載入一次。需要在 HTML 的 <img> 嵌入圖片者，宜儘量利用 CSS 的 background ，如此便可從快取 CSS 檔中讀取圖片。

　　下面以最常使用的 NotePad++ 文本編輯器作示例。

這是在 CSS 檔中常見的 background 圖片引入連結方式，此例含相對路徑。若改用嵌入式內聯圖片就不需理會什麼路徑，只要圖片內容就好，而且免路徑的內聯圖片是可攜的。

下圖為 NotePad++ 開啟 hi_iamwaterlily.png 圖檔後的內容。

將內容「全選」，在「外掛模組」選單下的 MIME Tools 點選 Base64 Encode 進行編碼[註]。圖為編碼後的內容。

將編碼後的內容全選並複製起來，然後切換到CSS檔，將反白部分先替換成 “data:image/圖檔格式;base64, ” 字句。

接下來在 , 號後面貼上之前已複製的 base64 編碼內容。(此例的“圖檔格式”為png)

貼上 base64 內容之後。

用 MHTML 會是如下這樣，base64 寫在 CSS 檔頭註解裡面，然後在 background 屬性裡引入自身檔案的絕對網址。

/*
Content-Type: multipart/related; boundary="WL--"

--WL--
Content-Location:waterlily
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAAJYAAABACAMAAA..........省略.......
*/

#example{
    background:url(mhtml:http://********.com/本檔檔名.css!waterlily) no-repeat;
}

　　可以看到，此例圖檔才一個 2.72 KB 大小，轉成 base64 後就有如此長的字串，Data URL 與 MHTML 併用的話，可想而知檔案變得有多肥，故謹記要啟用伺服器的 GZIP Components 才可使用。

[註] 沒有 MIME Tools 的話就進入外掛模組 > Plugin Manager > Show Plugin Manager 去安裝。若連 NotePad++ 編輯器軟體也沒有安裝，網上有免費在線圖片轉 Base64 Encode 工具提供，可去找找看。