圖片轉 Base64 轉換器 - 免費線上工具
即時將 PNG、JPG、GIF、WebP、SVG、BMP 圖片轉換為 Base64 字串，全程在瀏覽器本機處理，免費又安全。
上傳圖片
上傳
拖放或點選上傳
支援 PNG, JPG, GIF, WebP, SVG, BMP
Base64 輸出
Base64 字串將顯示在這裡...
Base64 字串將顯示在這裡...
如何將圖片轉換為 Base64
通過拖放或點選上傳區域上傳您的圖片。
工具將即時將您的圖片轉換為 Base64 字串。
複製原始 Base64 字串或用於 HTML/CSS 的 Data URI 格式。
使用產生的字串將圖片直接嵌入到您的程式碼中。
主要功能
即時轉換
即時將圖片轉換為 Base64，無需上傳到伺服器。
隱私優先
所有處理都在您的瀏覽器本機進行。您的圖片永遠不會離開您的裝置。
支援所有格式
相容 PNG, JPEG, GIF, SVG, WebP 和 BMP 格式。
Data URI 就緒
取得完整的 Data URI 字串，可直接用於 HTML <img> 標籤或 CSS background-image。
常見問題
為什麼要將圖片轉換為 Base64？
將圖片轉換為 Base64 允許您將其直接嵌入到 HTML 或 CSS 檔案中，從而減少 HTTP 請求數量並加快小圖片的頁面載入時間。
有檔案大小限制嗎？
由於處理是在您的瀏覽器中完成的，限制取決於您的裝置記憶體。但是，建議僅對小圖片（圖示、標誌）使用 Base64，以避免 HTML 檔案大小膨脹。
會出現品質損失嗎？
不會，Base64 編碼是無損的。解碼後的圖片將與原始圖片完全相同。
將任何圖片拖入工具或點擊選取，即可立即產生 Base64 字串。工具同時輸出原始 Base64 文字和可直接貼上的 Data URI（data:image/png;base64,...），支援 PNG、JPG、GIF、WebP、SVG 與 BMP 格式。所有處理均在瀏覽器本機完成，檔案不會上傳至伺服器。
如何將圖片轉換為 Base64
- 1
上傳圖片
將檔案拖放至上傳區域，或點擊瀏覽選取檔案。支援 PNG、JPG、GIF、WebP、SVG 與 BMP 格式。
- 2
取得編碼結果
工具在本機讀取檔案，無需上傳至伺服器，即時產生 Base64 字串。
- 3
選擇原始 Base64 或 Data URI
複製原始 Base64 文字供 JSON 載荷使用，或複製完整 Data URI 字串直接用於 HTML <img> 標籤與 CSS background-image。
- 4
嵌入程式碼
將 Data URI 直接貼入 HTML 或 CSS，實現圖片內聯，減少一次 HTTP 請求。
參考資料
- RFC 2397 — data URL 方案
IETF 規範，定義用於內嵌 Base64 編碼媒體的 data: URL 方案。
- MDN — Data URL
Data URL 語法、Base64 編碼及在 HTML 與 CSS 中嵌入圖片的實用指南。
相關工具
常見問題
- 為什麼要將圖片轉為 Base64？
- Base64 編碼讓您能將圖片以文字字串形式直接嵌入 HTML 或 CSS，無需額外 HTTP 請求載入外部檔案。對於圖示、Logo 等小圖片特別實用，有助提升頁面載入速度。
- 有檔案大小限制嗎？
- 工具本身無固定上限，實際限制取決於瀏覽器記憶體。需注意 Base64 編碼後體積約比原始二進位檔案大 33%，因此建議僅對小尺寸圖片使用 Base64 內聯方式。
- 轉換為 Base64 會造成圖片品質損失嗎？
- 不會。Base64 是無損編碼，解碼後的圖片與原始檔案逐位元組完全相同。
- 原始 Base64 和 Data URI 有什麼差別？
- 原始 Base64 是純編碼字串。Data URI 則在前面加上 data:image/png;base64, 前綴，告知瀏覽器 MIME 類型，可直接貼入 <img> 的 src 屬性或 CSS background-image 中使用。
- 我的圖片會上傳至伺服器嗎？
- 不會。所有編碼操作均透過 FileReader API 在瀏覽器本機完成，您的圖片不會離開裝置。
- 如何在 CSS 中使用 Base64 圖片？
- 複製 Data URI，將其作為 background-image: url('data:image/png;base64,...'); 屬性值貼入 CSS 檔案即可。
- SVG 檔案可以轉換嗎？
- 可以，支援 SVG 格式。但由於 SVG 本身是文字格式，許多場景下直接以 <svg> 標籤內聯，反而比轉為 Base64 更有效率，檔案體積也更小。