什麼時候應該內嵌圖片?

當圖片很小(數 KB 以內)且出現在首屏時,內嵌可以省去額外的 HTTP 請求,讓渲染更快。對較大圖片,編碼帶來的額外負擔(約 33%)會超過省下的請求。

PNG、JPEG、SVG、WebP、AVIF 與 GIF。SVG 特別適合內嵌,因為它本身是文字格式,編碼負擔極小。

在 CSS 中使用 data URI 安全嗎?

安全。請用 url() 包起來,並在 data URI 兩側加引號。Toova 產生的輸出本身已是 URL 安全,可直接用於 background-image、mask-image 與任何接受 URL 的屬性。

可以把 data URI 解碼回圖片嗎?

可以。貼上 data URI,Toova 會解碼為原始圖片並可下載。當您要從 HTML 或 CSS 檔案中抽取內嵌圖片時很實用。

我的圖片會被送到任何地方嗎?

不會。編碼完全在您的瀏覽器中執行。

圖片轉 Base64 轉換工具 — PNG、JPG、WebP 轉 Data URI

圖片轉 Base64 轉換工具

注重隱私的設計 — 完全在您的瀏覽器中執行

在瀏覽器中把任何圖片轉換為 Base64 data URI,可直接內嵌到 HTML、CSS 或 JSON 中。Toova 能處理所有常見格式、產生合法 data URI,而且絕不上傳圖片——適合小型圖示、郵件模板與自我封裝的文件。

什麼時候要內嵌圖片

小型圖片(數 KB 以內的圖示)以行內 data URI 渲染往往比另起 HTTP 請求更快,因為省去了來回。郵件模板經常內嵌圖片,因為許多郵件用戶端預設會封鎖外部載入。自我封裝的 HTML 文件(離線指南、可下載報告)需要把所有內容塞進單一檔案。Toova 把任何圖片轉成可直接貼進 src、background-image 或 JSON 欄位的 Base64 data URI。

格式與大小的考量

Base64 編碼會讓檔案大小增加約 33%,所以只有小型圖片內嵌才划算。超過大約 5 至 10 KB 後,單獨的 HTTP 請求通常會比膨脹後的行內內容更快。Toova 會顯示原始大小、編碼後大小與額外負擔百分比,讓您能做判斷。所有常見格式(PNG、JPEG、SVG、WebP、GIF)都支援。

純本機運作

圖片完全在您的瀏覽器中讀取與編碼。檔案不會被上傳,內容也不會被記錄。當圖片是未發表的設計稿、客戶照片或任何專有素材時,這特別重要。編碼期間 Network 分頁會保持空白,網頁載入後可離線運作。

常見問題

什麼時候應該內嵌圖片?: 當圖片很小(數 KB 以內)且出現在首屏時,內嵌可以省去額外的 HTTP 請求,讓渲染更快。對較大圖片,編碼帶來的額外負擔(約 33%)會超過省下的請求。
支援哪些格式?: PNG、JPEG、SVG、WebP、AVIF 與 GIF。SVG 特別適合內嵌,因為它本身是文字格式,編碼負擔極小。
在 CSS 中使用 data URI 安全嗎?: 安全。請用 url() 包起來,並在 data URI 兩側加引號。Toova 產生的輸出本身已是 URL 安全,可直接用於 background-image、mask-image 與任何接受 URL 的屬性。
可以把 data URI 解碼回圖片嗎?: 可以。貼上 data URI,Toova 會解碼為原始圖片並可下載。當您要從 HTML 或 CSS 檔案中抽取內嵌圖片時很實用。
我的圖片會被送到任何地方嗎?: 不會。編碼完全在您的瀏覽器中執行。