Data URI Scheme 完整指南：將資源內嵌網頁，減少 HTTP 請求

什麼是 Data URI Scheme？

Data URI Scheme 是一種統一資源標識符（URI）方案，允許將外部資源（圖片、樣式表、腳本等）直接以 Base64 編碼內嵌在 HTML、CSS 或 JavaScript 中。這相當於將資源變成網頁的一部分，單次 HTTP 請求即可載入原本需要多次請求的資源，顯著減少網絡往返。

語法結構

data:[<mediatype>][;base64],<data>

• data: 協議前綴
• mediatype: MIME 類型（如 image/png、text/css）
• ;base64: 可選，指明數據經 Base64 編碼
• data: 實際數據（Base64 編碼後的字符串或純文本）

三大主流應用場景

1. HTML 圖片內嵌

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="內嵌圖片">

2. CSS 背景圖/字體內嵌

.icon {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==') no-repeat;
  /* 亦可用於 @font-face 的 src */
}

3. JavaScript 動態生成頁面（IE8 不支持）

<script>
window.open('data:text/html;charset=utf-8,' + encodeURIComponent(
  '<!doctype html><html lang="en"><head><title>Embedded</title></head>' +
  '<body><h2>42</h2></body></html>'
));
</script>

支持的 MIME 類型速查表

PHP 生成 Base64 實用片段

// 圖片轉 Base64
$base64 = base64_encode(file_get_contents('demo.png'));
// 輸出完整 Data URI
echo 'data:image/png;base64,' . $base64;

優缺點權衡與最佳實踐

優點

• 減少 HTTP 請求數，降低延遲（特別適用 HTTP/1.1 環境）
• 避免跨域問題，資源與頁面同源
• 小圖標、圖標字體、關鍵 CSS 內嵌可消除閃爍

缺點

• Base64 編碼體積膨脹約 33%
• 無法獨立緩存（隨 HTML/CSS/JS 緩存）
• 增加主文檔體積，延遲首屏渲染
• IE8 及以下不支持，IE9+ 僅支持圖片且限 32KB
• HTTPS 頁面內嵌 HTTP 資源會觸發混合內容警告

建議策略

1. 小於 1-2KB 的裝飾性圖片（Icon、Loading 動畫）優先內嵌
2. 關鍵路徑 CSS 內嵌在 <head>，非關鍵 CSS 異步加載
3. 配合構建工具自動轉換，設定體積閾值
4. HTTP/2 環境下多路復用優勢明顯，內嵌收益遞減，謹慎使用

線上測試

複製以下字符串到瀏覽器地址欄查看效果：

data:text/plain;base64,d3d3LmNoZW53ZWkud3M=

（解碼後為：www.chenwei.ws）