使用情境

Base64 圖片適合用在哪裡？

當圖片需要以文字傳遞時，Base64 很有用：展示頁、API 資料、郵件片段、文件說明和小型介面素材。

HTMLCSSJSON郵件API文件

先選對輸出形態

Data URI 帶有 MIME 類型，可直接放進 HTML 或 CSS；Raw Base64 更適合 API 欄位、設定和單獨儲存。

Data URIdata:image/png;base64,iVBORw0KGgo...直接用於 HTML、CSS、Markdown，或任何瀏覽器需要圖片 URL 的位置。

Raw Base64iVBORw0KGgoAAAANSUhEUg...用於 JSON、API 參數、設定欄位，或 MIME 類型單獨保存的情境。

使用情境

複製符合目標情境的程式碼形態，再用轉換器產生的結果替換範例值。

Good for tiny icons, portable demos, or documentation where the image should be self-contained.

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Inline preview" width="120" height="120" />

Useful for small decorative assets, skeleton placeholders, and one-file prototypes.

.avatar-placeholder {
  width: 48px;
  height: 48px;
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
  background-size: cover;
}

Use raw Base64 when the receiving service expects a text field instead of multipart upload.

{
  "fileName": "logo.png",
  "mimeType": "image/png",
  "base64": "iVBORw0KGgoAAAANSUhEUg..."
}

Inline Data URIs can help with small fallback images, but always test client compatibility.

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Brand mark" style="display:block;width:96px;height:auto;" />

Base64 keeps screenshots, placeholders, and tiny diagrams inside one Markdown or HTML file.

![Inline diagram](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...)

Raw Base64 is plain text, so it can be pasted into test fixtures, cURL commands, or logs.

curl -X POST https://api.example.com/upload \
  -H "Content-Type: application/json" \
  -d '{"mimeType":"image/png","base64":"iVBORw0KGgo..."}'

什麼時候不建議用 Base64

Base64 會增加體積，也繞過普通圖片快取，不適合作為所有圖片的預設方案。

大型照片使用普通圖片 URL、響應式尺寸和 CDN 快取更合適。

重複使用的正式資源獨立檔案可以被瀏覽器快取一次，並在多個頁面重複使用。

SEO 或分享預覽圖片搜尋引擎和社群平台更依賴普通圖片 URL。

頻繁變動的媒體Base64 會讓 diff、快取失效和內容排查更麻煩。

實用判斷規則

圖片轉換、文字編碼和 Base64 還原，都可以在同一個本機瀏覽器工作流裡完成。