圖片內嵌 Base64 與 Data URI 技術解析
在前端效能工程中，HTTP 請求連線建立與握手開銷（RTT）往往是影響載入速度的重要因素。透過將小型點陣圖或向量圖轉換為 Base64 Data URI，可以直接將圖片資料以 ASCII 文字形式內嵌於網頁原始碼中。
Data URI 標準格式結構
data:[<mediatype>][;base64],<data>- mediatype：指示 MIME 類型，例如
image/png、image/jpeg、image/webp或image/svg+xml。 - ;base64：指定採用 Base64 演算法進行二進位編碼。
- data：編碼後的字元主體。
最佳實踐情境與注意事項
何時適合使用 Base64 圖片：
- 小圖標與向量標誌：單一圖示檔案通常僅幾 KB，內嵌可減少瀏覽器多次並行請求負擔。
- 免伺服器儲存傳輸：在無後端雲端物件儲存（S3/GCS）的情境下，以 JSON 或 LocalStorage 儲存圖檔。
- 單一檔案 HTML 匯出：生成完全自包含、單一檔案即可離線完整展示的報表或電子郵件模板。
何時應避免使用 Base64 圖片：
- 大尺寸照片或橫幅：Base64 膨脹約 33% 體積，且無法獨立享有瀏覽器 HTTP 快取機制。
- 多頁面共用素材：多個頁面皆需使用的素材若重複內嵌，將造成 HTML 傳輸量重複浪費。
支援的複製輸出格式
- Data URL：
data:image/png;base64,iVBORw...（適用於 JavaScript 與各類 API） - HTML 標籤：
<img src="data:image/png;base64,..." alt="Image" />（直接貼入網頁原始碼） - CSS 背景樣式：
background-image: url('data:image/png;base64,...');（貼入樣式檔） - 純 Base64：省略前綴的純粹二進位編碼文字。
操作步驟
- 選擇圖片：拖曳本機圖片至上傳區域，或點擊瀏覽檔案進行選取。
- 即時自動編碼：系統於本地記憶體極速運算，並即時統計原始大小與編碼後字元長度。
- 選擇代碼風格：點擊切換 Data URI、HTML 或 CSS 標籤。
- 一鍵複製：點擊複製按鈕，立即套用到專案程式碼中。