圖片轉 Base64
免費線上圖片轉 Base64 工具，可把單張上傳圖片轉成 `data:<mime>;base64,...` 格式資料，並包成 HTML `<img>`、Inline CSS `background-image` 或 JSON 文字，所有處理都在瀏覽器內完成。
如何使用圖片轉 Base64 工具
- 拖放或點擊上傳一張圖片，支援常見瀏覽器可讀取的 JPG、PNG、GIF、WebP、SVG 與 BMP。
- 選擇要輸出的包裝格式：HTML `<img>`、Inline CSS `background-image`，或 JSON 物件中的圖片欄位。
- 檢查預覽、MIME 類型與檔案大小後，直接複製目前輸出內容，或下載成純文字檔案保存。
什麼是圖片 Base64 Data URL？
圖片轉 Base64 工具會把你上傳的單張圖片讀成 Data URL，也就是帶有 `data:<mime>;base64,...` 前綴的文字內容。這類格式適合直接嵌入 HTML 標記、CSS 樣式或 JSON 測試資料，方便在原型、文件範例或小型前端片段中快速引用圖片。
這個頁面專注於把圖片轉成可嵌入的文字輸出，不做壓縮、裁切、縮放、格式轉換或批次處理。上傳、預覽與轉換都透過瀏覽器內的 FileReader 完成，適合需要本機快速產生圖片 Data URL 的情境。
工具特色
- 支援單張圖片拖放或點擊上傳，保留目前簡單直接的轉換流程。
- 上傳後立即顯示圖片預覽、MIME 類型與檔案大小，方便確認是否為正確來源。
- 可切換 HTML、Inline CSS 與 JSON 三種既有輸出格式，內容都包含完整 Data URL。
- 支援一鍵複製到剪貼簿，或下載目前選擇格式的純文字檔案。
- 所有處理都在瀏覽器內完成，不需要登入、安裝或把圖片送到伺服器。
常見使用情境
- 把小型圖片嵌入 HTML 範例碼、教學文件或元件展示頁面。
- 快速產生 CSS `background-image` 片段，方便做 prototype、email 模板或單頁小素材。
- 建立 JSON fixture、測試 payload 或前端假資料時內嵌圖片欄位。
- 整理設計說明、開發文件或 issue 重現案例時附上可直接貼用的圖片資料。
- 在不想另外管理圖片檔案路徑的短期展示或測試場景中，先用 Data URL 驗證效果。
常見問題
圖片會被上傳到伺服器嗎？
不會。這個工具目前使用瀏覽器內的 FileReader 讀取你選擇的單張圖片，頁面功能沒有把圖片送到後端處理。
輸出的是原始 Base64，還是可直接用的格式？
頁面輸出的是包含 `data:<mime>;base64,...` 的 Data URL，並依你目前選擇包成 HTML `<img>`、Inline CSS 或 JSON 文字，而不是只提供裸 Base64 片段。
可以使用哪些圖片類型？
頁面接受瀏覽器可透過 `image/*` 選取的常見圖片格式，當前文案列出的包含 JPG、PNG、GIF、WebP、SVG 與 BMP。實際可讀取情況仍以你的瀏覽器與檔案本身為準。
這個工具會壓縮、縮小或重新調整圖片嗎？
不會。這個頁面只把圖片轉成 Base64 Data URL 並包裝成指定文字格式，不提供壓縮、縮放、裁切、優化或格式轉換功能。
什麼情況適合用 Base64 內嵌，什麼情況更適合保留檔案連結？
若你是在做小型範例、測試資料、文件展示或少量內嵌素材，Data URL 會比較方便；若圖片較大、需要快取、重複使用或正式上線部署，通常保留獨立圖片檔與連結會更合適。
注意事項
- Base64 內嵌通常會讓文字內容變長；圖片愈大，HTML、CSS 或 JSON 內容就會愈重。
- 大量或大型 Data URL 可能影響頁面可讀性、維護性與載入效能，不一定適合正式上線資產管理。
- 這個頁面不是圖片編輯器，也不是壓縮器、最佳化工具或圖片格式轉換器。
- 目前流程一次只處理一張圖片，下載內容也是目前選擇格式的純文字輸出。