如何將圖片轉換為 Base64 Data URL

2026-07-19· 標籤: image-to-base64, base64, data-url, image-embedding, web-performance, html, css

什麼是 Base64 圖片 Data URL？

Base64 圖片 Data URL 將整個圖片檔案以文字字串的形式直接嵌入網頁文件中，省去了載入圖片所需的獨立 HTTP 請求。瀏覽器無需請求外部檔案，圖片資料已經存在於 HTML 或 CSS 中。

其格式如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

拆解說明：

data: — data URI 方案前綴
image/png — 嵌入圖片的 MIME 類型
;base64 — 表示 Base64 編碼
,iVBORw0... — 實際的 Base64 編碼圖片資料

為什麼要將圖片轉換為 Base64？

以下幾種場景適合將圖片嵌入為 Base64：

減少 HTTP 請求

每個外部圖片檔案都需要一個獨立的 HTTP 請求。Base64 Data URL 消除了這些請求，可以改善頁面載入時間——尤其是在高延遲連線或頁面包含大量小型資源的情況下。

獨立的文件

Base64 圖片讓您的 HTML 檔案完全可攜。帶有 Base64 圖片的電子郵件範本即使在收件者的郵件客戶端封鎖外部資源時也能正常顯示。同樣地，嵌入了圖片的 HTML 文件可以作為單一檔案分享，無需擔心圖片路徑失效。

對效能要求嚴格的頁面

對於首屏的主視覺圖片和關鍵 UI 元素，消除額外的往返請求可以改善 Largest Contentful Paint（LCP）等指標。然而，這僅對小型圖片有益——對於大型圖片，內聯反而會產生反效果。

支援離線使用

當圖片以 Data URL 嵌入時，無需網路連線即可使用。這對於離線網頁應用程式和漸進式網頁應用程式（PWA）極具價值。

如何將圖片轉換為 Base64

方法一：使用線上工具（最簡單）

將圖片轉換為 Base64 最快速的方法是使用專用的線上工具。將圖片上傳或拖放到我們的免費線上 Base64 編碼器，即可獲得完整的 Data URL，直接貼到您的程式碼中。

方法二：在瀏覽器中使用 JavaScript

FileReader API 提供了一種直接的方法，將使用者選取的圖片轉換為 Base64：

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

// Usage with a file input
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

方法三：使用 Canvas API

如果您需要在將圖片轉換為 Base64 之前對其進行調整大小、裁剪或壓縮，Canvas API 是最佳選擇：

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Example: Resize an image before converting
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

方法四：使用 Node.js

在伺服器端，使用 fs 模組和 Buffer 將圖片檔案轉換為 Base64：

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Detect MIME type from extension
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

方法五：使用命令列

在 Linux 和 macOS 上，您可以使用內建的 base64 命令：

# Encode to Base64 and wrap as a data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

如何在 HTML 中使用 Base64 圖片

直接在 <img> 標籤中使用：

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

如何在 CSS 中使用 Base64 圖片

作為背景圖片使用：

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

效能考量與最佳實務

何時使用 Base64 圖片有益

小於 10 KB 的小型圖示和 UI 元素
會阻塞渲染的關鍵首屏圖片
頁面中重複使用的精靈圖和 SVG 圖示
外部圖片常被封鎖的電子郵件範本
離線優先的網頁應用程式和獨立文件

何時使用 Base64 圖片有害

大型照片或高解析度圖片（100 KB 以上）——Base64 的開銷和解析延遲會損害效能
頻繁變更的圖片——使大型 HTML 酬載的瀏覽器快取失效是浪費資源的
跨多個頁面共用的圖片——外部檔案可受益於共用的瀏覽器快取
CDN 提供的圖片——CDN 對檔案傳遞的最佳化優於內聯資料

10 KB 經驗法則

一個廣泛引用的準則：如果圖片小於 10 KB，可以考慮將其內聯為 Base64。如果更大，則應作為獨立檔案提供。這在 HTTP 請求的開銷與 HTML 中 Base64 編碼資料的開銷之間取得平衡。

然而，最佳閾值取決於您的具體情況：

HTTP/2 多工傳輸減少了多次請求的懲罰，使外部檔案更具吸引力
在慢速連線上，消除請求即使對於較大的圖片也可能很有價值
對於關鍵渲染路徑資源，即使圖片較大，如果能減少一次往返請求，也可以內聯

壓縮考量

如果您要將 JPEG 或 PNG 圖片轉換為 Base64，可以考慮改用 WebP。WebP 在相同品質水準下提供更優異的壓縮效果，從而產生更小的 Base64 字串。許多線上工具可讓您在轉換為 Base64 之前重新編碼圖片。

將您的圖片轉換為 Base64

準備好將圖片直接嵌入您的程式碼了嗎？使用我們的免費線上 Base64 編碼器和解碼器上傳圖片，即可取得用於 HTML、CSS 和 JavaScript 的完整 Data URL——無需安裝。