開發者工具 · Base64 編碼器和解碼器
資料 URI 解釋：data:image/png;base64 如何運作以及它來自哪裡
· 背景
base64 編碼
data: URL 方案在 1998 中指定，作為將小資源直接嵌入到頁面中的方法。這篇文章解釋了它的語法、為什麼 Base64 是可選的以及瀏覽器的限制。
圖示是 1,300 字元 URL — 遇到 data: URI 並讀取其部分
data: URI 將小資源直接嵌入 URL 中，避免單獨的 HTTP 請求。此格式在 RFC 2397（在 1998 中定義）中指定，並使用具有方案、可選媒體類型、可選編碼標誌和有效負載本身的語法。例如，data:text/plain,hello 是包含單字 hello 的純文字資料 URI。瀏覽器處理此內容的方式與處理 HTTP 請求的方式相同，但它不是透過網路取得內容，而是從 URL 本身進行解碼。
資料 URI 最常見於小圖片、CSS 圖示和測試裝置。具有 Base64 編碼的 data: URI 如下所示： data:image/png;base64,iVBORw0K.... 細分為： data: 是方案； image/png 是媒體類型； ;base64是編碼標誌；長字串是 Base64 編碼的圖片位元組。當瀏覽器看到此 URL 時，它會解碼 Base64 以還原原始字節，然後使用這些位元組呈現圖片。
從可見語法讀取資料 URI — 媒體類型、可選的 Base64 標記和有效負載
如果省略編碼標誌（data:text/html,<p>hello</p>），則有效負載是百分比編碼的 UTF-8 文字，而不是 base64。 ;base64 的存在告訴瀏覽器要套用哪一種解碼規則。 data: URI 中的媒體類型是 MIME 類型，與 HTTP Content-Type 標頭中使用的類型字串相同。 image/png、text/plain、application/json 和 image/svg+xml 是常見範例。如果未指定媒體類型，則預設為 text/plain;charset=US-ASCII。
瀏覽器必須根據媒體類型決定如何渲染位元組：如果顯示 image/png,，則位元組為 PNG；如果顯示 text/html, ，則內容為 HTML。指定錯誤的媒體類型可能會產生令人困惑的結果；標記為文字 /plain 的 PNG 檔案將顯示為垃圾字元而不是圖片。 Base64 在 data: URI 中是可選的。對於文字內容，百分比編碼（與 URL 查詢字串中使用的編碼相同）通常比 base64 更緊湊。資料 URI 用戶決定如何根據媒體類型和逗號之前的標記來解釋有效負載。 Base64 編碼器僅提供有效負載字元。它不加入 MIME 類型、選擇位元組是描述 PNG 還是 SVG，或驗證組裝的位址。
為什麼 Base64 是可選的 — SVG 和純文字的百分比編碼文字負載與二進位的 Base64
URI data:text/html,<p>Hello</p> 包含作為文字字元的 HTML（對任何特殊字元（如引號或尖括號）進行百分比編碼）。 Base64 對於無法表示為文字的二進位資料以及有效負載包含許多百分比編碼會導致膨脹的特殊字元的情況非常有用。小的 SVG 或文字檔案可能採用較小的百分比編碼；二進位檔案必須是 base64。手動建立 data: URI 需要了解媒體類型和編碼。
對於 SVG 圖標，您可以使用 data:image/svg+xml 後跟百分比編碼的 SVG 標記或 ;base64 和 base64 編碼的位元組。對於百分比編碼，請將 SVG 包裝在 data:image/svg+xml, 中，然後對任何尖括號、引號和其他特殊字元進行百分比編碼。結果很長但人類可讀。對於 Base64，取得 SVG 位元組，將它們編碼為 Base64，並產生 data:image/svg+xml;base64,，然後附加 Base64 字串。對於二進位來說，Base64 通常更緊湊，但對於 SVG 文字，百分比編碼形式可能更短。
工作範例：手動為小型 SVG 建立 data: URI — 將標記編碼為文字並組裝字串
瀏覽器和消費性應用程式可以對資料 URI 施加限製或策略限制，但此儲存庫不建立可移植的數位上限。記憶體使用、解析器行為和安全性策略也取決於值出現的位置，因此測試確切的目標瀏覽器和嵌入上下文，而不是依賴記住的限制。
每個 HTML 檔案中的 5 MB 嵌入圖片都會使頁面大小膨脹。資料 URI 最適合小型資源：CSS 圖示、小圖片或測試資料。對於大檔案，外部請求速度更快，因為瀏覽器可以快取回應並跨多個頁面重複使用它； data: 每次頁面加載時都會內聯 URI。
在消費性應用程式中驗證瀏覽器和安全邊界，而不是假設
常見的閾值是幾千位元組；在此之下，data: URI 是高效的；除此之外，外部檔案通常更快。安全性和瀏覽器策略限制資料：某些上下文中的 URI 使用。通常會封鎖頂級導覽（點擊包含 HTML 內容的 data: URI 的連結）以防止網路釣魚。腳本 src 屬性中的 data: URI 可以執行任意 JavaScript，從而產生安全風險。
瀏覽器將內容安全策略 (CSP) 規則套用至資料： URI；嚴格的 CSP 可能會完全禁止它們。 data: URI 通常允許在 img src 或 iframe src 中使用，但嵌入樣式或腳本上下文中可能會受到限制。請務必檢查目標環境的瀏覽器相容性和安全性原則。 CSS 中的資料 URI 對於小背景圖片很常見。語法相同： url(data:image/png;base64,...).
資料：URI 仍然是正確的工具 — CSS 圖示、電子郵件安全的內嵌圖片和測試裝置
A CSS file with embedded data: URIs can be shipped as a single file with all images included, reducing HTTP requests.這對於小圖示集或簡單圖形很有用。 CSS 中嵌入的大圖片會使檔案膨脹並減慢其解析速度。現代建構工具（如 webpack）可以自動將小圖片轉換為資料：CSS 中的 URI，將外部圖片轉換為普通 URL，從而平衡效能。
data: URI 格式由 RFC 2397 定義，這是一個簡短的文件，指定語法，但沒有定義 data: URI 可以或不能使用的位置。瀏覽器供應商基於安全性和效能問題添加了自己的限制。
這不包括 - blob：URL、物件 URL 和檔案系統訪問
某些系統已棄用資料：某些上下文中的 URI 支援（例如 CSP 等級 3 中的表單操作）以防止濫用。當使用 data: URI 時，在目標瀏覽器中測試它； RFC 表示該格式有效，但瀏覽器的安全性策略可能會阻止它。
Creating a data: URI manually is uncommon in production;大多數建置工具和函式庫都會處理轉換。但了解格式對於調試很有用。如果您在 CSS 或 HTML 中看到很長的 data:image/... URL，您可以使用 Base64 編碼器和解碼器工具對其進行解碼：刪除 data:image/...;base64, 前綴，將剩餘的字串貼到工具中，然後對其進行解碼以查看實際位元組。
重點：具有嚴格語法的小格式 — Base64 編碼器和解碼器如何處理文字編碼步驟，以便您可以組裝有效的 URI
對於 SVG 資料：URI，您可以對文字表單進行百分比解碼並讀取 XML 標記。了解資料的結構：URI 可以更輕鬆地排除嵌入資源的故障。資料 URI 是一種 Web 標準 (RFC 2397)，允許將資源直接作為 URL 嵌入。對於無法從單獨快取中受益的小型、穩定的資源，它們最為有效。此格式包括可選的媒體類型規格和編碼標誌（base64 或隱含的百分比編碼）。
Base64 編碼對於二進位資料是必需的，但對於文字是可選的；百分比編碼的 SVG 更具可讀性。瀏覽器安全性策略限制 data: URI 的使用位置，因此了解目標環境中的限制至關重要。 Base64 編碼器和解碼器工具可以幫助您手動編碼資源或解碼嵌入的 URI 以檢查其內容。