Data URI 生成器

Q: 如何在 HTML 和 CSS 中使用 Data URI？

在任何需要 URL 的地方直接使用即可：HTML 中寫 ，CSS 中寫 background-image: url("data:image/svg+xml,...")。在 CSS 中請給值加上引號，百分號編碼的 SVG 尤其如此。

Q: 需要指定字元集嗎？

如果是含有非 ASCII 字元（例如中文）的 text/plain、text/html 等文字型別，需要在媒體型別後加上 ;charset=UTF-8，否則預設的 US-ASCII 可能導致亂碼。image/png 等二進位型別不需要字元集。

Q: 如何把圖片轉換為 Data URI？

可以直接在這裡選擇圖片檔案，也可以使用 圖片轉 Base64，它還能先調整圖片尺寸或轉換格式，並輸出現成的 HTML、CSS 和 Markdown 程式碼片段。

把文字或檔案轉換為可用於 HTML、CSS 或 JSON 的 data: URL，可選 Base64 或百分號編碼。貼上現有的 Data URI，還能檢視其 MIME 型別、字元集和大小，預覽並下載內容。

MIME 型別編碼方式文字編碼

輸入

開啟檔案

Data URI

完全在瀏覽器中執行，不會上傳任何資料。

使用方法

輸入文字，或選擇要嵌入的檔案。
檢查或填寫 MIME 型別，例如 image/png 或 image/svg+xml，然後選擇 Base64 或百分號編碼。
把生成的 Data URI 複製到 HTML、CSS 或 JSON 中。
如需檢查現有的 Data URI，把它貼上到解析區域，即可檢視 MIME 型別、字元集、大小和預覽，並下載其中的檔案。

Data URI 的語法

Data URI 由 RFC 2397 定義，它把一個小檔案直接放在 URL 裡：

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

data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...

媒體型別告訴瀏覽器如何解釋這些資料；如果省略，則預設為 text/plain;charset=US-ASCII。;base64 標記表示逗號後面的內容是 Base64；沒有這個標記時，資料就是普通文字，其中的特殊字元需要做百分號編碼。

Base64 還是百分號編碼

PNG、JPEG、WebP、字型和 PDF 等二進位檔案應使用 Base64，它固定會讓體積增加約 33%。對於文字格式，百分號編碼往往更小：大多數字符保持原樣，只有 <、>、#、% 和雙引號等少數字符需要轉義。因此它很適合 SVG 圖示，而且結果仍然可讀，經過 gzip 或 Brotli 壓縮後效果也更好。不過非 ASCII 文字的每個位元組都會變成三個字元，所以中文或西里爾文文字通常用 Base64 更短。拿不準時，可以兩種方式都試一下，選擇較短的結果。

/* CSS 中百分號編碼的 SVG：內部使用單引號，# 寫作 %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }

什麼時候適合內聯

Data URI 可以省去一次 HTTP 請求，但資料會成為所在文件的一部分：

無法單獨快取。內聯在 HTML 中的圖片會隨每個頁面重新下載；內聯在樣式表中的圖片隨樣式表一起快取，修改它就會讓整個樣式表的快取失效。
首次渲染變慢。CSS 中體積較大的 Data URI 會推遲渲染，因為瀏覽器必須先下載並解析完整個樣式表。
體積增加。Base64 會增加三分之一的體積，對 HTML 或 CSS 進行壓縮只能彌補一部分。

在 HTTP/2 和 HTTP/3 下，額外請求的開銷很小，所以只建議內聯幾 KB 以內的小資源，例如圖示、小佔位圖或首屏關鍵背景，其餘資源仍以普通檔案提供。如果網站設定了內容安全策略（CSP），需要在 img-src 或 font-src 中允許 data:，內聯的圖片和字型才能載入。

常見問題

Data URI 有大小限制嗎？

RFC 2397 沒有規定上限，現代瀏覽器在圖片和樣式表中可以處理幾 MB 的 Data URI。但過大的 Data URI 仍然不可取：它會讓頁面臃腫，無法單獨快取，解析也更慢。

為什麼點選指向 Data URI 的連結打不開？

為了防範釣魚攻擊，大多數瀏覽器會阻止網頁把主視窗跳轉到 data: URL。請在圖片、CSS 或下載連結中使用 Data URI，或者把它貼上到本頁的解析區域進行預覽和下載。

如何在 HTML 和 CSS 中使用 Data URI？

在任何需要 URL 的地方直接使用即可：HTML 中寫 <img src="data:image/png;base64,...">，CSS 中寫 background-image: url("data:image/svg+xml,...")。在 CSS 中請給值加上引號，百分號編碼的 SVG 尤其如此。

需要指定字元集嗎？

如果是含有非 ASCII 字元（例如中文）的 text/plain、text/html 等文字型別，需要在媒體型別後加上 ;charset=UTF-8，否則預設的 US-ASCII 可能導致亂碼。image/png 等二進位型別不需要字元集。

如何把圖片轉換為 Data URI？

可以直接在這裡選擇圖片檔案，也可以使用圖片轉 Base64，它還能先調整圖片尺寸或轉換格式，並輸出現成的 HTML、CSS 和 Markdown 程式碼片段。