不同的圖片加載方式

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

常見的圖片加載方式

通常而言，最多見的圖片加載方式是 HTTP URI Scheme 簡稱 HTTP URI。例如：某圖片存儲在又拍雲存儲上，連接爲 https://f.lxpzyy.top/upyun/up...。咱們能夠經過引入圖片 HTTP 連接的方式，如：<img src=」https://f.lxpzyy.top/upyun/upcdn.svg」/> 來加載圖片。

除此以外，咱們能夠經過 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:<mime type>[;<encoding>],<encoded data>

這幾部分分別爲：

• data： 表示取得數據的協定名稱，代表這是一個 Data URI。
• mime type： 數據類型名稱，也是就是 image/svg+xml，若是傳入的是個 png 圖片，那麼能夠指定類型爲 image/png。
• charset=<charset>： 可不填，默認是 charset=US-ASCII 編碼。
• base64： 是數據的編碼方法。
• encoded data： 通過 base64 編碼後的數據。

咱們能夠看到，除去可不填的 charset=<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 的過程當中，咱們能夠從如下幾點着重考慮:

• 圖片的實際尺寸比較小
• 不常常更新的資源圖片
• 須要在頁面中常用的圖片

推薦閱讀

深刻淺出聊聊 Rust WebAssembly（一）

go-zero：開箱即用的微服務框架