圖片轉 Base64

將圖片檔案編碼為 Base64 文字字串，以便嵌入程式碼中。

免費 - 無需註冊 - 在你的裝置上執行

你的檔案留在你的裝置上

  • Data URI輸出
  • HTML/CSS嵌入
  • 複製到剪貼簿
  • 私密編碼
實際使用

可以放心的地方

  • 0檔案上傳
    • 編碼在你的瀏覽器中完成
    • 你的圖片保持私密
  • 100%基於瀏覽器
    • 不涉及伺服器處理
    • 無需排隊，即時取得結果
  • 1:1表示
    • 直接的二進位到文字編碼
    • 過程中不會損失品質
規格

圖片轉 Base64 規格一覽

輸入格式
JPG、PNG、WebP、HEIC、HEIF
回傳內容
data URI 與複製按鈕
貼上位置
直接貼進 CSS 或 HTML
批次處理
一次一張圖片
運算位置
在你的瀏覽器分頁內
加入檔案
拖放、選檔或貼上
價格
免費
需要帳戶
否
使用方法

圖片轉 Base64 怎麼用

  1. 1

    新增你的圖片

    將圖片檔案拖放到頁面上，或點擊從你的電腦中選擇檔案。此工具支援包括 SVG 在內的多種格式。

  2. 2

    複製字串

    Base64 編碼的 Data URI 會即時產生並顯示。點擊複製按鈕將整個字串複製到你的剪貼簿。

  3. 3

    貼上到你的程式碼

    將複製的字串貼到你的 HTML `<img>` 標籤的 `src` 屬性或 CSS `url()` 函數中。

問題

常見問題

我什麼時候應該對圖片使用 Base64 編碼？

它最適合用於非常小的圖片，例如圖示。將大型圖片嵌入為 Base64 可能會使你的 HTML 或 CSS 檔案非常大且載入緩慢。

這會改變圖片品質嗎？

不會。Base64 只是表示完全相同圖片資料的一種不同方式。當瀏覽器解碼時，圖片看起來會完全相同。

我可以將 Base64 字串轉換回圖片嗎？

此工具僅執行從圖片到 Base64 字串的編碼。它不包含將文字轉換回檔案的解碼器。

一次可以加入多少張圖片？

沒有固定上限。總量超過約 500 MB 時，頁面會在開始前提醒你。ZIP 內同名檔案會自動加上編號。若瀏覽器不支援，頁面會直接說明，不會讓你白等。

背景說明

在網頁開發中使用 Base64

此工具會從圖片建立 Data URI，其中包含其 MIME 類型和 Base64 內容。這對於將圖片直接嵌入 HTML、CSS 或 JSON 非常有用。

  • 將圖片嵌入為 Base64 Data URI 可以減少 HTTP 請求，從而提高頁面效能。這對於小圖示或背景圖片很有效。
  • 權衡之處：Base64 字串比二進位檔案大約大 33%，且無法與 HTML 或 CSS 分開快取。

完整規格

圖片轉 Base64 的完整規格
輸入格式JPG、PNG、WebP、HEIC、HEIF 都能在分頁中解碼。
回傳內容一段 data URI，旁邊附有複製按鈕。
貼上位置直接貼進你的 CSS 或 HTML。
批次處理一次處理一張圖片。
運算位置在你的瀏覽器分頁內完成，圖片不會離開裝置。
加入檔案可拖放、選檔，或用 Ctrl／⌘+V 貼上。同一批檔案可直接帶去站內其他工具，不必重新上傳。
價格免費
需要帳戶否
下一步

用同一批檔案繼續做

全部開發工具： SPOTTOOLS 的開發工具