Data URI 完整指南：將資源內嵌到 HTML 中
在網頁效能最佳化中，減少 HTTP 請求是一個重要策略。Data URI（也稱為 Data URL）允許你將小型資源直接嵌入 HTML 或 CSS 中，從而減少伺服器請求次數。本文將完整介紹 Data URI 的語法、應用場景及最佳實踐。
什麼是 Data URI？
Data URI 是一種由 RFC 2397 定義的 URI 方案，允許在 URL 中直接包含資料內容，而非指向外部資源。其語法格式為：
data:[<mediatype>][;base64],<data>
- mediatype — MIME 類型，如
image/png、text/html - base64 — 可選標記，表示資料使用 Base64 編碼
- data — 實際的資料內容
Data URI 的常見用途
1. 嵌入小型圖片
最常見的用途是將小型圖示或 icon 直接嵌入 HTML 的 <img> 標籤或 CSS 的 background-image 中。這對於小於 2-4KB 的圖片特別有效。
2. CSS 中的背景圖片
在 CSS 中使用 Data URI 可以減少樣式表載入時額外的圖片請求。對於 CSS sprites 的替代方案，Data URI 提供了更簡單的維護方式。
3. 字型嵌入
雖然不常見，但在某些情況下可以將小型字型檔案嵌入 CSS 中，避免額外的字型載入請求。
4. SVG 內嵌
SVG 圖片特別適合使用 Data URI，因為 SVG 本身就是文字格式，甚至不需要 Base64 編碼就能直接嵌入。
效能考量
| 優點 | 缺點 |
|---|---|
| 減少 HTTP 請求 | 增加 HTML/CSS 檔案大小 |
| 消除 DNS 查詢延遲 | 無法被瀏覽器獨立快取 |
| 減少伺服器負載 | Base64 增加約 33% 大小 |
| 避免 CORS 問題 | 不適合大型資源 |
最佳實踐：根據 HTTP Archive 的研究，Data URI 最適合用於小於 2KB 的資源。超過這個大小，額外的 Base64 開銷和無法快取的缺點會超過減少 HTTP 請求的好處。
Data URI 的大小限制
不同瀏覽器對 Data URI 的大小限制不同：
- Chrome — 無硬性限制（但建議不超過 2MB）
- Firefox — 無硬性限制
- Safari — 無硬性限制
- Edge — 無硬性限制
雖然現代瀏覽器已沒有嚴格的大小限制，但從效能角度來看，超過 10KB 的資源通常不建議使用 Data URI。
何時不該使用 Data URI
- 大型圖片（超過 5KB）— 使用外部檔案搭配 CDN 更有效率
- 需要多次重複使用的圖片 — 外部檔案可以利用瀏覽器快取
- 需要動態更新的資源 — Data URI 是靜態嵌入的
- 行動裝置效能敏感的場景 — Base64 解碼需要額外的 CPU 運算
快速生成 Data URI
使用我們的 Base64 工具，可以快速將檔案轉換為 Data URI 格式：
立即使用 Base64 編碼/解碼工具 →結語
Data URI 是一個強大但需要審慎使用的技術。在正確的場景下使用它可以有效提升網頁效能，但過度使用反而會適得其反。掌握何時使用和何時不使用，才是關鍵。
參考文獻
- Masinter, L. "The 'data' URL scheme." IETF RFC 2397, 1998. https://datatracker.ietf.org/doc/html/rfc2397
- Mozilla Developer Network. "Data URLs." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
- HTTP Archive. "State of the Web." HTTP Archive Reports. https://httparchive.org/reports
- Grigorik, I. "High Performance Browser Networking." O'Reilly Media, 2013.