Data:URL 圖片

圖片是頁面中比不可少的元素，通過圖片可以讓頁面更加美觀，也讓某些功能更加醒目。

本站（螞蟻部落）對圖片的應用隨處可見，否則會嚴重影響使用者體驗。

通常，將圖片放置於伺服器指定位置，然後使用路徑引用。

程式碼片段如下：

[HTML] 純文字檢視 複製程式碼
<img src="image/img.gif ">

通過 <img> 標籤可以引入一個圖片元素，下面對其做進一步的分析：

（1）.src 屬性值是圖片在伺服器的路徑，可以是相對路徑也可以是絕對路徑。

（2）.當頁面載入到 <img> 標籤位置時，向伺服器發起一次 http 請求。

（3）.最後得到這個 http 請求的響應，獲取此圖片。

（4）.發起 http 請求和從伺服器載入圖片需要消耗一定的效能，尤其是這樣的請求較多的時候。

關於路徑更多知識可以參閱相對路徑和絕對路徑一章節。

使用 Data:URL 方式引入圖片可以有效的避免上述效能問題，簡單演示如下：

[HTML] 純文字檢視 複製程式碼
<img src="data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7">

程式碼分析如下：

（1）.將圖片轉換為為 base64 字串格式。

（2）.然後通過 Data:URL 方式將其插入到HTML頁面中。

省去了向伺服器發起請求的步驟，在一定程度上提高了效能。

特別說明：可以直接將src中的字串複製到瀏覽器位址列檢視對應的圖片內容。

瀏覽器支援：

（1）.IE8不完全支援，IE9+完全支援。

（2）.edge 瀏覽器支援此方式。

（3）.谷歌瀏覽器支援此方式。

（4）.opera 瀏覽器支援此方式。

（5）.火狐瀏覽器支援此方式。

（6）.Safari 瀏覽器支援此方式。

根據其所具有的特點，可以將其應用到更為恰當的場景。

如下幾種場景推薦使用 Data:URL 引入圖片：

（1）.圖片較小，且較多，每次都發起一次 http 請求會非常消耗效能。

（2）.動態方式生成的圖片，且每次生成的圖片都不相同。

此種方式當前也具有一些缺點，總結如下：

（1）.將圖片進行 base64 編碼之後，體積會明顯增大。

（2）.圖片不會被快取，這是一個很大的問題，快取機制可以有效的提高效率。

不過也有一些技巧可以解決快取問題，首先看一段簡單程式碼例項：

[CSS] 純文字檢視 複製程式碼
background-image: url("image/img.gif")

上面程式碼可以為指定元素引入一張背景圖片，背景圖片可以很輕鬆進行快取，如果換做是Data:URL方式的話，圖片無法被快取，但是可以將CSS檔案快取器來，以達到快取圖片大致相同的效果。

Data:URL方式不僅僅可以表示圖片，也可以是其他內容，本文不做過多介紹。

特別說明：HTTP2廣泛應用之後，此方式引入圖片的優點就沒有那麼明顯，更多內容參閱HTTP協議版塊。