在瀏覽網頁的過程中，圖片最容易吸引用戶的注意力，它即能給用戶直觀感受，又能清晰地表達意圖，所以在制作網頁時，如何快速有效地加載圖片資源顯得尤為重要。

常見的圖片加載方式

一般而言，最常見的圖片加載方式是 HTTP URI Scheme 簡稱 HTTP URI。例如：某圖片存儲在又拍云存儲上，鏈接為 https://f.lxpzyy.top/upyun/upcdn.svg。我們可以通過引入圖片 HTTP 鏈接的方式，如： 來加載圖片。

除此之外，我們可以通過 Data URI Scheme 的方式來引入圖片。

<img src=“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……/>

Data URI Scheme 的方式和 HTTP URI 的使用較為類似，只是看起來多了很多“亂碼”。那這些亂碼有什么作用呢？和 HTTP URI 相比，它有什么優勢讓我們選擇它呢？

初識 Data URI

Data URI scheme 簡稱 Data URI ，是在 RFC2397 中進行定義的。目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入。以上方的 Data URI 鏈接為例：

<img src=“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……/>

我們可以看到它由 data，image/svg+xml，base64 以及后面的字符串組成。

data:[][;charset=][;],

這幾部分分別為：

• data： 表示取得數據的協定名稱，表明這是一個 Data URI。

• mime type： 數據類型名稱，也是就是 image/svg+xml，如果傳入的是個 png 圖片，那么可以指定類型為 image/png。

• charset=： 可不填，默認是 charset=US-ASCII 編碼。

• base64： 是數據的編碼方法。

• encoded data： 經過 base64 編碼后的數據。

我們可以看到，除去可不填的 charset=，使用 Data URI 必然會用到 base64 編碼，那這個要如何獲得呢？

如何獲得 base64 編碼

最簡單的方式是直接上網找一個編碼小工具。

現在網上有很多的 base64 編碼小工具，他們可以直接將文件或者字符進行 base64 解編碼。

除此之外以下代碼語言也都有其對應的 base64 編碼方式，可以很方便地進行編碼解碼轉換：

• JAVA

String test="Upyun"; BASE64Encoder base64Encoder=new BASE64Encoder(); String encode = base64Encoder.encode(test.getBytes("UTF-8")); System.out.println(encode);

• PHP

$str = 'Upyun'; $encode = base64_encode($str); echo $encode.'<br>';

• **JavaScript **

var data=windows.btoa('Upyun');

Data URI 的使用方式及優勢

了解了 Data URI 的大致情況，我們來看看它要如何使用。

它主要有兩種使用方式，第一種是將處理好的 Data URI 格式數據，放入 HTML 頁面代碼 img 標簽的 src 屬性中。這種方式的好處是減少了 HTTP 請求，缺點是無法進行緩存。另一種方式則是將 Data URI 放入到 css 里，優點是瀏覽器會積極緩存 css 文件來提升加載頁面時的速度，缺點是增加了 css 的長度。

那么回到我們最初的問題 Data URI 比 HTTP URI 的優勢是什么呢？

相比 HTTP URI，Data URI 擁有以下優勢：

• 使用 Data URI 能夠有效減少 HTTP 請求數

• 不依賴于網絡環境，即沒有網絡的時候頁面中的資源也可以被加載出來

• 可以免除一些極小文件對 HTTP 請求的占用

當然 Data URI 也有不少缺點。經過 Base64 編碼后的文件或者數據，通常來說比起原文件體積增大了30%左右，然后 Data URI 通常會寫在 css 文件中，不易維護，另外手機端加載 Data URI 資源也比較消耗 CPU 資源。

相比之下，Data URI 還是很值得使用的，現在就有很多場景都使用 Data URI 的方式引入資源，比如百度首頁的小圖標以及谷歌的首頁等。

如果想讓網站擁有不同的加載方式，特別是避免因網絡狀況差導致的無法加載問題，那一定要試試 Data URI。

在考慮使用 Data URI 的過程中，我們可以從以下幾點著重考慮:

• 圖片的實際尺寸比較小

• 不經常更新的資源圖片

• 需要在頁面中經常使用的圖片

總結

以上是生活随笔為你收集整理的不一样的图片加载方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。