圖片轉 Base64 的運作方式
整個轉換流程在瀏覽器中透過 File API 和內建的 btoa 函式完成 — 無需下載編解碼器函式庫，伺服器也不會看到圖片。以下是完整的處理流程：
- 拖入或選擇圖片。瀏覽器從本機磁碟將其讀取為 Blob，位元組不會複製到伺服器。
- 檔案以 1 MB 為單位分塊讀取，每塊的位元組追加到二進位字串中。分塊處理可防止大型圖片導致 JavaScript 呼叫堆疊溢位。
- 將二進位字串傳入 btoa，該函式將每三個位元組映射為四個 Base64 字元，字母表為 A–Z、a–z、0–9、加號和斜線。
- 從 File 物件讀取檔案的 MIME 類型（image/png、image/jpeg 等），並作為 data: 前綴拼接，產生完整的 data:image/…;base64,… URI。
- 頁面從該 URI 組合四種輸出 — 完整 data URI、無前綴的原始 Base64、可直接貼上的
標籤以及 CSS background-image 片段 — 每種輸出均附有複製按鈕。
為什麼將圖片編碼為 data URI？
- 將小圖示或 logo 內嵌為 data URI 可省去單獨的網路往返，使頁面或郵件在首幀渲染時更快。
- 包含內嵌圖片的頁面或樣式表是自包含的，可離線使用，複製時無需攜帶整個資源資料夾。
- 許多郵件用戶端預設封鎖外部遠端圖片。將 logo 內嵌為 Base64，郵件開啟時即可立即顯示，無需遠端擷取。
- 編碼完全在瀏覽器中完成，敏感圖片不會傳輸至第三方伺服器，適用於截圖、證件掃描件和內部設計圖。
Base64 圖片的常見用途
data URI 適用於圖片足夠小、單獨請求的開銷超過 Base64 帶來的約 33% 體積增加的場景。以下三種模式最為常見：
- CSS 內嵌圖示：將 1–2 KB 的圖示嵌入樣式表作為 background-image: url(data:…)，使規則完全自包含。
- 郵件簽名和電子報：將 logo 作為帶有 data URI src 的
嵌入，即使用戶端封鎖遠端圖片也能正常顯示。
- 建置工具內嵌：Webpack 和 Vite 等打包器會自動將低於位元組門檻的資源內嵌，本工具可預覽該輸出的實際效果。
Base64 圖片是什麼樣子？
以一張微小的 1×1 透明 PNG 為例。其原始位元組僅 67 位元組，編碼後變為字串 iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=，完整的 data URI 為 data:image/png;base64,iVBORw0KGgo…。注意編碼後的形式比原始體積大約三分之一——這就是將二進位資料安全嵌入文字所付出的代價。
我的圖片會上傳到任何地方嗎？
不會。轉換使用瀏覽器的 File API 和原生 btoa 函式，圖片完全在您的裝置上編碼。您可以自行驗證：開啟瀏覽器開發者工具，切換到 Network（網路）面板，然後轉換一張圖片——您看到的請求只有頁面載入和廣告相關的內容，沒有任何圖片資料被傳送到伺服器，因此處理截圖、證件及內部設計圖是安全的。
為什麼 Base64 輸出比原始圖片更大？
Base64 將每三個位元組的二進位資料表示為四個 ASCII 字元，因此編碼後的文字比來源檔案大約增加 33%。本頁面的 data URI 大小讀數會顯示精確的膨脹長度。這也是 data URI 只適合小圖片的原因——將 2 MB 的照片內嵌會使 HTML 或 CSS 體積遠超單獨請求的開銷。經驗法則：4 KB 以下的圖片適合內嵌，更大的圖片建議連結引用。
可以轉換哪些圖片格式？
任何瀏覽器能識別為圖片的格式均可使用，因為本工具讀取的是原始位元組，而非對圖片進行解碼。支援的格式包括 PNG、JPEG、GIF、WebP、SVG 和 BMP。MIME 類型直接從檔案讀取，因此 data: 前綴始終與真實格式相符——JPEG 產生 data:image/jpeg，SVG 產生 data:image/svg+xml。關於 SVG 的特別說明：SVG 本身是文字格式，因此對於 SVG，URL 編碼的 data URI 通常比 Base64 版本更小，但本工具為保持一致性統一輸出 Base64 形式。
拖入圖片，複製所需的 data URI 或程式碼片段，貼到您的 HTML、CSS 或郵件範本中。每個位元組都留在您的裝置上。無需上傳，無需帳號，無需伺服器往返。