內嵌圖片會把檔案位元組放進 HTML、CSS 或其他文件中，可以讓小型檔案獨立分發，但也會把圖片與文件的下載、快取繫結。應根據完整流程判斷，不能認為 URL 越少，頁面一定越快。
構建正確字首
PNG 的字首是 data:image/png;base64,，後面跟原檔案的 Base64。JPEG 使用 image/jpeg，WebP 使用 image/webp。修改型別名稱不會轉換影像格式；接收方需要 JPEG 時，必須先重新編碼圖片。
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="圖片內容說明" width="32" height="32">這裡的佔位符不是可顯示圖片，需要替換成完整編碼。若編碼結果已經包含 data:，不要再加一次。貼上時注意引號完整，也要防止富文本編輯器插入換行。
計算實際代價
編碼部分每三個位元組變成四個字元，末組補齊。30,000 位元組的圖片會產生 40,000 個字元，外加字首。HTML 壓縮可能影響傳輸體積，但瀏覽器仍要解析文件並解碼圖片，因此應測試完整頁面。
獨立圖片可以跨頁面快取複用；內嵌圖片與每個包含它的文件繫結。大型重複插圖通常不適合自動內嵌，小型獨立報告中的一次性圖示則可能適合。
驗證接收環境
內容安全策略可能限制 data: 圖片，郵件客戶端也可能移除或拒絕顯示。自己的瀏覽器能預覽，並不能證明收件人的應用相容。應測試實際匯出檔案與目標客戶端。
臨時本地預覽通常可用 Blob URL，避免建立很長的 Base64 字串；檢視移除後應釋放 URL。匯出獨立 HTML 時可以考慮 Data URI。兩者都應保留替代文字和尺寸。語法與瀏覽器行為見 MDN: data URLs。