不一樣的圖片載入方式

又拍雲發表於2021-07-27

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

常見的圖片載入方式

一般而言，最常見的圖片載入方式是 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 的過程中，我們可以從以下幾點著重考慮:

  • 圖片的實際尺寸比較小

  • 不經常更新的資源圖片

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

相關文章