圖片轉 Base64 編碼器

為什麼要將圖片轉成一長串文字 (Base64)？

通常我們在網頁上顯示圖片時，是使用 <img> 標籤去連結一個外部檔案（例如：<img src="image.png">）。這意味著瀏覽器必須發送一個請求 (HTTP Request) 去下載這張圖。

Image to Base64 是一種將圖片的二進位數據轉換為 ASCII 文字字串的技術。轉換後，您可以直接把這串代碼「塞」進 HTML 或 CSS 裡，瀏覽器就能直接讀取並顯示圖片，完全不需要去下載外部檔案。

使用 Base64 的三大優勢

1. 減少 HTTP 請求 (Reduce Requests)： 這是最主要的用途。對於網站上的小圖示、Logo 或裝飾性背景，轉成 Base64 可以減少瀏覽器與伺服器之間的往返次數，顯著提升網頁載入速度。

2. Email 簽名檔與電子報 (EDM)： 許多 Email 軟體（如 Outlook）預設會封鎖外部圖片連結，導致您的 Logo 顯示為一個紅叉叉。使用 Base64 編碼將圖片直接嵌入郵件原始碼中，可以確保收件人一打開信就能看到完整的圖片。

3. 單一檔案方便攜帶： 如果您正在製作一個簡單的 HTML 頁面發給客戶預覽，使用 Base64 可以讓所有圖片都包含在同一個 .html 檔案中，不用擔心圖檔路徑遺失的問題。

如何使用？

1. 上傳圖片：選擇您的 PNG, JPG, GIF 或 SVG 檔案。

2. 生成代碼：工具會瞬間生成一串以 data:image/... 開頭的字串。

3. 複製並貼上：

   • HTML 用法：複製 <img> 標籤格式，直接貼入網頁。

   • CSS 用法：複製背景圖片格式 (background-image: url(...))，貼入樣式表。

注意事項：什麼時候「不要」用？

雖然 Base64 很方便，但它有一個缺點：轉換後的字串大小通常會比原始圖檔大約 33%。 因此，建議只將小圖片（如 Icon、Logo、小裝飾圖）轉為 Base64。如果是大張的攝影照片，轉成 Base64 反而會讓網頁 HTML 變得非常肥大，導致載入變慢。

常見問題 (People Also Ask)

以下是關於 Base64 編碼的常見疑問：

Q1：轉換後圖片畫質會變差嗎？

A: 不會。Base64 是一種「無損編碼」方式。它只是把圖片的資料換了一種寫法（從二進位變成文字），解碼出來的圖片像素與原始檔案是一模一樣的，完全沒有畫質損失。

Q2：這對 SEO 有影響嗎？

A: 適度使用是有益的。Google 建議減少 HTTP 請求來提升 PageSpeed 分數，這對 SEO 有加分。但如果濫用（例如把整頁大圖都轉碼），導致 HTML 檔案過大，反而會因為讀取太慢而扣分。

Q3：為什麼生成的字串這麼長？

A: 因為圖片包含的資訊量很大。即使是一個 10KB 的小圖示，轉換成文字後也可能有上萬個字元。這是正常的，瀏覽器可以毫無壓力地讀取它。

Q4：支援哪些圖片格式？

A: 本工具支援所有主流的網頁圖片格式，包括 PNG (支援透明)、JPG/JPEG (照片)、GIF (動圖) 以及 SVG (向量圖)。