圖片轉 Base64

實測範例：小圖示的輸出大小與資料 URI 格式

上傳一張約 20KB 的 PNG 小圖示後，畫面上的「Base64 長度」欄位會顯示字元數，通常會落在原始位元組數的 4/3 倍左右；可以直接拿這個數字跟「原始檔案大小」欄位比較，實測驗證大約 33% 的膨脹率是否成立。

輸出的資料 URI 開頭固定是 data:image/png;base64,（或依原始檔案類型顯示 image/jpeg、image/webp 等），這個工具不會幫你轉換圖片格式，如果需要先轉檔再取得 Base64，要先用本站的圖片格式轉換工具處理過一次。

• 按「複製」拿到完整的 data:image/...;base64,... 字串，適合直接貼進 img 標籤的 src 屬性。
• 按「複製為 CSS」拿到 background-image: url("data:image/...;base64,..."); 這一整行，可以直接貼進 CSS 檔案。

超過 5MB 時的行為，以及如何驗證輸出可用

超過 5MB 的檔案會在選取當下立即被拒絕，顯示「圖片過大（上限約 5MB），請選擇較小的檔案。」，不會嘗試部分讀取或先壓縮再轉換，也不會呼叫伺服器處理，所有動作都在瀏覽器分頁內完成。

驗證輸出是否可用：把「複製為 CSS」的結果貼進一個測試用的 HTML 檔案的 style 屬性，在瀏覽器打開確認圖片正常顯示；也可以把完整字串貼進網址列的新分頁直接預覽，確認字串沒有被截斷。

這個工具適合幾 KB 到幾百 KB 的小圖示、Logo 或簡單插圖；大型相片轉成 Base64 之後字串長度會非常長，內嵌進 CSS 或 HTML 反而讓檔案難以維護，這種情況應該改用一般的圖片檔案搭配路徑引用，而不是內嵌。

如何使用

1. 選擇要轉換的圖片檔案（建議 5MB 以內）。
2. 工具會立即產生 Base64 資料 URI。
3. 按「複製」取得字串，或按「複製為 CSS」取得 background-image 寫法。
4. 把字串貼到你的 HTML、CSS 或設定檔中使用。

常見使用情境

• 把小圖示內嵌到 CSS，減少額外請求。
• 在沒有圖片主機時，直接把圖片放進 HTML。
• 在設定檔或 email 範本中嵌入圖片。

適合誰使用

• 需要內嵌小圖示到 HTML 或 CSS 的前端開發者
• 沒有圖片主機、想直接把圖片放進網頁的使用者
• 準備 email 範本或設定檔內嵌圖片的行銷與工程人員

實際案例

注意事項

• 檔案大小上限精確寫死在程式碼是 5×1024×1024 位元組（約 5MB），超過會在選取當下就被拒絕。
• 這個工具不會轉換圖片格式，輸出的 MIME 類型完全跟著上傳的原始檔案。
• Base64 字串通常比原始檔案大約三分之一，大型相片不適合用這種方式內嵌。