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 編碼，檔案會比較小。
