圖片Base64轉換器

圖片Base64轉換器是一款免費的線上工具，可以將任何圖片轉換為 Base64 編碼字串。Base64 編碼將二進制圖片數據轉換為純 ASCII 文字，讓您可以將圖片直接嵌入 HTML、CSS、JavaScript、JSON、XML 等代碼中，而無需單獨的圖片文件。所有操作都在您的瀏覽器中完成：您的圖片永遠不會被上傳到任何伺服器。

什麼是 Base64 圖片編碼？

Base64 是一種二進制轉文本的編碼方案，使用 64 個 ASCII 字元（A–Z, a–z, 0–9, +, /）來表示二進制數據。當應用於圖片時，Base64 會將原始圖片位元組轉換為一段長的文字字串，可以直接嵌入原始碼中。在網頁開發中使用 Base64 圖片最常見的方式是透過 Data URI — 一種允許在網址中包含內聯數據的方案，格式為 data:[MIME 類型];base64,[編碼數據]。

何時使用 Base64 圖片

何時「不」適合使用 Base64 圖片

Base64 編碼會使檔案大小增加約 33%。對於大圖片（照片、橫幅），請使用透過 HTTP/2 提供服務的傳統圖片文件，HTTP/2 支援多路復用。在生產環境中，應避免對大於 10–20KB 的圖片使用 Base64，因為增加的大小負擔會抵消減少 HTTP 請求帶來的好處。此外，大型 Base64 字串無法被瀏覽器單獨緩存。

支援的圖片格式

如何使用此工具

1. 上傳您的圖片：將圖片檔案拖放到上傳區域，點擊瀏覽檔案，或使用 Ctrl+V (Mac 上為 Cmd+V) 從剪貼簿貼上圖片。
2. 預覽並查看元數據：該工具會立即顯示圖片預覽，包含檔案名稱、尺寸、MIME 類型，以及原始數據與編碼數據之間的視覺化大小比較。
3. 選擇您的輸出格式：在四個輸出分頁之間切換 — 原始 Base64（僅編碼字串）、Data URI（帶 MIME 前綴）、HTML <img> 標籤（可直接貼上）或 CSS background-image 屬性。
4. 複製結果：點擊「⧉ 複製」按鈕將編碼輸出複製到剪貼簿，即可貼上到您的程式碼中。

輸出格式指南

原始 Base64 字串

不帶任何前綴的純 Base64 編碼文字。當您在自定義實作、API 調用中需要原始數據，或者您想自行添加 MIME 前綴時，請使用此格式。

Data URI

包含 MIME 類型前綴的完整 Data URI（例如 data:image/png;base64,iVBOR...）。這是最通用的格式 — 它直接適用於 HTML 的 src 屬性、CSS 的 url() 值以及 JavaScript 的圖片載入。

HTML <img> 標籤

一個現成的 HTML 圖片元素，以 Base64 Data URI 作為 src，並包含 width 和 height 屬性以確保正確佈局。直接將其貼上到您的 HTML 中即可。

CSS background-image

使用 background-image: url('data:...') 的完整 CSS 屬性聲明。將其添加到任何 CSS 規則中，即可在不引用外部檔案的情況下將圖片作為背景使用。

隱私與安全

此工具完全使用 JavaScript FileReader API 在您的網頁瀏覽器中本地處理所有內容。您的圖片絕不會上傳到任何伺服器，絕不會被儲存，也絕不會透過網路傳輸。Base64 轉換完全在您的設備上進行，使此工具對於處理敏感和機密圖片非常安全。

常見問題

什麼是圖片的 Base64 編碼？

Base64 編碼將二進制圖片數據轉換為 ASCII 文字字元。這讓您可以將圖片作為 Data URI 直接嵌入 HTML、CSS 或 JavaScript 代碼中，從而消除對單獨圖片文件請求的需求。編碼後的字串比原始二進制數據大約增加 33%。

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

對於小圖片（通常在 10KB 以下），如圖示、標誌和 UI 元素，請使用 Base64。它可以減少 HTTP 請求並簡化部署。避免對大圖片使用，因為 33% 的大小增加會損害性能。它也適用於電子郵件模板、單文件 HTML 文檔和 CSS 背景圖片。

我的圖片會被上傳到任何伺服器嗎？

不會。此工具完全使用 JavaScript FileReader API 在您的瀏覽器中處理圖片。您的圖片永遠不會離開您的設備，確保完整的隱私和安全。轉換過程在您的機器上即時完成。

支援哪些圖片格式？

此轉換器支援所有常見圖片格式，包括 PNG, JPEG, GIF, WebP, SVG, BMP 和 ICO。該工具會自動檢測 MIME 類型並為每種格式生成正確的 Data URI 前綴。

Base64 字串和 Data URI 有什麼區別？

Base64 字串僅是圖片數據的編碼文本表示。Data URI 則包含一個帶有 MIME 類型的前綴（例如 data:image/png;base64,），後跟 Base64 字串。Data URI 可以直接用於 HTML src 屬性和 CSS url() 值中。

額外資源

• Data URLs - MDN Web Docs
• Base64 編碼 - MDN Web Docs
• Base64 - 維基百科