圖片轉Base64編碼：何時以及如何使用

Base64編碼可以讓你將圖片作為文字字串直接嵌入HTML、CSS和電子郵件範本中。圖片資料不再參考外部檔案，而是內嵌在文件本身中。這消除了一個HTTP請求，但會使有效負載大小增加約33%。理解這種權衡何時合理，是有效使用Base64圖片的關鍵。

什麼是Base64編碼？

Base64是一種二進位到文字的編碼方案，使用64個可列印的ASCII字元（A–Z、a–z、0–9、+、/）來表示二進位資料。每3個位元組的二進位輸入產生4個Base64輸出字元，這就是為什麼編碼後的資料總是比原始資料大約33%。

應用於圖片時，Base64編碼將PNG、JPEG、SVG或GIF檔案的原始像素資料轉換為可以嵌入到任何接受文字的地方的長文字字串。

資料URI語法

嵌入Base64編碼圖片的標準方法是透過資料URI：

data:[媒體類型][;base64],<編碼資料>

例如，一個小PNG圖示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="紅點" />

常見的圖片MIME類型：

使用我們的圖片轉Base64轉換器即時轉換任何圖片。

何時使用Base64圖片

1. HTML電子郵件範本

電子郵件用戶端預設會封鎖外部圖片請求。Base64編碼的圖片會立即顯示，無需收件人點選「載入圖片」。這是Base64編碼圖片最強的使用情境。

<img src="data:image/png;base64,iVBORw0KGgo..." alt="公司標誌" width="150" />

請注意，一些電子郵件用戶端有大小限制（Gmail會截斷超過約102KB HTML的訊息），因此請保持Base64圖片較小。

2. 小圖示和UI元素

對於2KB以下的微小圖片——網站圖示、載入動畫、簡單圖示——Base64編碼在沒有顯著大小開銷的情況下消除了HTTP往返。

.icon-check {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...');
  width: 16px;
  height: 16px;
}

3. CSS背景圖片

將小型裝飾圖片直接嵌入樣式表可以減少瀏覽器需要發起的請求總數：

.button-success {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i...');
  background-repeat: no-repeat;
  background-position: left 8px center;
  padding-left: 28px;
}

4. 單檔HTML文件

當你需要分發獨立的HTML報告、儀表板或文件檔案時，將圖片嵌入為Base64可確保檔案在移動或分享時不會出現問題。

5. 避免CORS問題

將圖片嵌入為Base64字串可以完全避免跨域限制，因為沒有外部請求。

何時不應使用Base64圖片

1. 大圖片

100KB的JPEG經Base64編碼後變成約133KB。500KB的照片變成嵌入HTML中約667KB的文字。這會使初始頁面載入膨脹，且瀏覽器無法獨立快取。

經驗法則： 對於網頁，不要對大於5-10KB的圖片進行Base64編碼。

2. HTTP/2和HTTP/3環境

現代HTTP協定在單一連線上多工處理請求。在HTTP/1.1時代為Base64辯護的「節省HTTP請求」論點已基本過時。將圖片作為獨立檔案提供可以讓瀏覽器獨立快取它們。

3. 跨頁面重複的圖片

如果同一圖片出現在多個頁面上，作為獨立檔案提供意味著瀏覽器只下載一次並快取。Base64編碼則強制瀏覽器在每次頁面載入時重新下載編碼資料。

4. 經常更改的圖片

每次Base64編碼的圖片更改時，整個HTML或CSS檔案快取都會失效。獨立檔案讓你可以在不使文件快取失效的情況下更新圖片。

5. 伺服器端渲染頁面

大型Base64字串會增加HTML文件大小，減慢首位元組時間（TTFB），並阻止解析器處理頁面的其餘部分。

在JavaScript中將圖片轉換為Base64

FileReader API提供了在瀏覽器中將圖片轉換為Base64的簡便方法：

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 與檔案輸入一起使用
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const base64String = await imageToBase64(file);
  console.log(base64String);
  // 輸出：data:image/png;base64,iVBORw0KGgo...
});

效能對比

最佳實踐

1. 設定大小門檻。 對於網頁，僅對5KB以下的圖片進行Base64編碼。對於電子郵件，每張圖片保持在20KB以下。
2. 先最佳化。 在編碼前壓縮圖片。更小的來源檔案意味著更小的Base64字串。
3. 盡可能使用SVG。 SVG可以直接作為XML內嵌，無需Base64編碼，完全避免33%的大小增加。
4. 使用建構工具自動化。 Webpack、Vite和其他打包工具可以在建構過程中自動將小圖片內嵌為Base64。
5. 監控總頁面大小。 多個Base64圖片會快速累積。嵌入後追蹤你的文件大小。

常見問題

Base64編碼會影響圖片品質嗎？

不會。Base64是無損編碼——它將二進位資料轉換為文字而不改變底層圖片資料。解碼後的圖片與原始圖片逐位元組相同。

我可以對任何圖片格式進行Base64編碼嗎？

可以。PNG、JPEG、GIF、SVG、WebP、ICO和任何其他格式都可以進行Base64編碼。資料URI中的MIME類型告訴瀏覽器如何解碼圖片資料。

為什麼Base64輸出大33%？

Base64使用每個字元6位元來表示資料，但每個字元在文字中佔用8位元（一個位元組）。這意味著3位元組的二進位資料變成4位元組的Base64文字：增加33%。

相關資源

• 圖片轉Base64轉換器 — 即時將圖片轉換為Base64資料URI
• Base64編碼器/解碼器 — 編碼和解碼任何文字或檔案
• Base64編碼詳解 — 深入了解Base64的運作原理

---

🛠️ 立即試用： 圖片轉Base64轉換器 | Base64編碼器 — 100%免費，所有處理都在瀏覽器中完成。不上傳任何資料。

---