圖片轉 Base64
將任何圖片拖進這個圖片轉 Base64 工具，即可取得 Data URI 以及可直接貼到 HTML、CSS 和 JavaScript 的程式碼。內嵌圖片可為小圖示省下 HTTP 請求，對單一檔案的 HTML、電子郵件範本和離線應用程式更是不可或缺。
圖片檔案
將圖片拖放到這裡，或選擇檔案
如何線上轉換 圖片轉 Base64
- 選擇圖片檔案或貼上圖片網址。
- 選擇輸出：Data URI、
<img>、CSS 背景、favicon、JSON 等。 - 點擊圖片編碼為 Base64。
- 預覽圖片並複製程式碼。
更多 圖片轉 Base64 轉換工具
輸出格式
選擇結果的包裝方式。轉換器可輸出：
- txt: 只有 Base64 字串，可直接貼到程式碼、資料庫欄位或 API 請求中。
- uri: 完整的
data:URI，可貼到瀏覽器網址列，或用在任何接受網址的地方。 - html img: 在
src中放入 Data URI 的<img>標籤。 - css background image: 使用
background-image: url(data:...)的 CSS 規則。 - html favicon: 用於內嵌網站圖示的
<link rel="icon">標籤。 - html hyperlink: 可下載或開啟內嵌檔案的
<a>連結。 - html iframe: 以內嵌方式顯示內容的
<iframe>。 - javascript image: 建立
Image物件的 JavaScript。 - javascript popup: 在新視窗開啟內容的 JavaScript。
- json: 包含檔名、MIME 類型和資料的 JSON 物件。
- xml: 資料放在 CDATA 區段中的 XML 元素。
何時應將圖片內嵌為 Base64？
建議內嵌小圖片（約 5–10 KB 以下），例如圖示、標誌和預留位置圖，以減少請求。避免內嵌大型照片：它們會讓 HTML/CSS 變得笨重、無法單獨快取，還會延遲顯示。詳細說明請參閱 Data URI 詳解。
常見問題
如何將圖片轉為 Base64？
選擇圖片，將輸出設為「Data URI」或「<img>」，然後點擊「圖片編碼為 Base64」。將結果複製到 HTML 或 CSS 中。
支援哪些圖片格式？
瀏覽器能讀取的任何格式：PNG、JPG/JPEG、GIF、WebP、SVG、BMP、ICO、AVIF、TIFF 等。
如何在 HTML 中使用 Base64 圖片？
將 Data URI 放在 src 屬性中：<img src="data:image/png;base64,iVBORw0KGgo..." alt="">。
留言 (0)
對「圖片轉 Base64」有問題、想法或發現錯誤嗎？歡迎留言、為工具評分或回覆他人。
目前還沒有留言，歡迎搶先分享您的意見！