一、 Base64 是什麼？將二進位轉化為純文字

Base64 是一種基於 64 個可列印字元（A-Z, a-z, 0-9, +, /）來表示二進位資料的編碼方式。在網頁設計中，它最常被用來處理圖片（如 PNG、SVG）。通常網頁會透過連結（URL）來讀取圖片，但使用 Base64 後，圖片會變成一段極長的代碼，直接寫在 <img> 標籤的 src 屬性裡。

這種「Data URI」模式讓圖片不再是獨立的檔案，而是網頁結構的一部分。

 

二、 減少 HTTP 請求：Base64 的最大優勢

瀏覽器在載入網頁時，每讀取一張獨立圖片都需要發起一次 HTTP 請求。當網頁上有大量的小圖示（Icons）時，頻繁的請求會造成排隊延遲（Latency）。

合併請求： 將小圖片轉為 Base64 並嵌入 CSS 中，可以讓瀏覽器在下載 CSS 的同時就拿到了圖片資料。

無縫體驗： 這種做法特別適合用於網頁初次載入時必須立刻出現的元素，如 Loading 動畫或背景小裝飾，避免因圖片延遲加載而出現的「空白感」。

 

三、 使用場景建議：哪些檔案適合 Base64？

並非所有檔案都適合轉成 Base64。因為編碼後的字串體積會比原始檔案增加約 33%，若盲目使用反而會拖慢網頁。

適合使用： 1KB 到 5KB 以下的小圖示、簡單的 SVG 向量圖、或是在 CSS 中頻繁使用的背景點綴圖。

不適合使用： 高解析度的大型照片（如背景大圖）、影片或大型 PDF。

對於大型檔案，使用 Base64 會導致 HTML/CSS 檔案變得無比巨大，反而會造成瀏覽器解析代碼時的卡頓。

 

四、 實作技巧：如何在網頁中套用 Base64？

在 HTML 中，你可以將 Base64 字串放在 data:image/png;base64,... 格式中。

 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

 

而在 CSS 中則常用於背景圖：

.icon { background-image: url("data:image/svg+xml;base64,..."); }

 

目前市面上有多種線上轉檔工具（如 Base64 Image Encoder），或是利用 VS Code 插件一鍵轉換。建議將 Base64 配合「快取（Caching）」使用，將其放在外部 CSS 檔案中，這樣使用者下次回訪時就連這段代碼都不必重新下載，達到真正的極速體驗。