Base64 Images
26 Jul 2018將圖片轉為編碼字串,讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼,以減少 HTTP Request。適合較少更新的小圖,例如 icon 等。
格式
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
優缺點
使用 Base64 Images 的優缺點。
優點
- 由於網頁每次同時能發出的 HTTP Request 數量有限,且下載需等待時間,若圖片使用 Base64 編碼就不需要 HTTP Request 來請求檔案和等待,讓使用者早點看到畫面。
缺點
- 使用 Base64 編碼的圖檔可能比原二進位檔案來得大,平均比原檔案大 33%。
- 在更新圖檔方面,若能直接更新檔案或連結是較容易的,至於更新 Base64 編碼的圖檔需要使用工具先將圖片轉碼,維護較困難。解法是使用自動化工具並安裝 plugin,像是 css-base64-images 和 postcss-base64。
- 增加文件檔案大小。由於 Base64 編碼的圖檔會產生大量字串,因此若圖片太大,字串就會非常長而導致文件太大,那麼這個圖檔就不適合使用 Base64 編碼了,但可使用 Gzip 壓縮和檔案快取來改善。
- 由於並非圖檔,因此無法做 Image Caching。
因此是否要使用 Base64 Images 主要就是看要省 (1) HTTP Request 或 (2) Gzip 壓縮後的檔案大小 或 (3) 快取 的時間了。
這裡有實測數據。一些想法整理如下…
- 在 icon 方面,由於「sprites 原檔 + Gzip」vs「CSS + Base64 + Gzip」,在檔案都較小且相差不大的狀況下,後者由於節省一次 sprites 的 HTTP Request 而勝出。
- 若為縮圖,考慮以在 HTML 嵌入 Base64 Images 的方式實作,雖然沒有節省到檔案大小,但可節省取得圖檔的 HTTP Request。實際範例可參考 Google 圖片搜尋和 Dropbox 縮圖的圖片瀏覽。
- 若為大圖,不管是內嵌 HTML 或 CSS,雖然使用 Base64 可節省 HTTP Request,但考慮 HTML/CSS 檔案的龐大,則還是分別使用 HTTP Request 請求檔案和圖片快取較能讓使用者早點載完、早點看到畫面。
工具
如何將圖片轉成 Base64 Images?
- Base64 Image Encoder:將圖片轉成 Base64 的線上工具。
- css-base64-images,將 CSS 檔案中的圖片轉成 Base64,圖檔大小限制為 4KB。
- postcss-base64:將 CSS 檔案中的圖片轉成 Base64。
- gulp-base64-inline:將 CSS 檔案中的圖檔轉為 Base64。
- gulp-css-base64:將 CSS 檔案中的圖檔和字型轉為 Base64。
- base64 image loader for webpack:將
<img>
中的 src 轉為 Base64。 - base64-inline-loader for webpack:將 CSS 檔案中的圖檔轉為 Base64。
可先壓縮圖檔後再做 Base64 編碼,檔案會比較小。