跳至主內容

圖片轉 Base64 編碼器

將圖片檔案轉換為 Base64 字串。生成可直接嵌入 HTML、CSS 的 Base64 代碼。

📁

点击或拖放图像到这里

支持：JPG、PNG、GIF、WebP（最大 10MB）

关于 Base64 图像

Base64 编码将图像转换为可以直接嵌入 HTML、CSS 或 JSON 的文本格式。这消除了对单独图像文件的需求并减少了 HTTP 请求。

优点

  • 无额外 HTTP 请求 - 页面加载更快
  • 适合小图标和徽标
  • 在电子邮件模板中效果良好
  • 自包含 HTML 文件

缺点

  • 文件大小增加约 33%
  • 无法被浏览器单独缓存
  • 不适合大图像
  • 降低代码可读性

最佳实践

  • 用于 10KB 以下的小图像（图标、项目符号）
  • 转换前优化图像
  • 考虑使用 SVG 代替矢量图形
  • 照片使用传统图像文件

主要功能​

📤 簡便上傳​

  • 點擊選擇檔案
  • 支援拖放上傳
  • 最大支援 10MB

🖼️ 即時預覽​

  • 上傳圖片立即預覽
  • 顯示圖片資訊（大小、解析度、類型）
  • 計算 Base64 數據大小

💻 代碼片段​

  • HTML <img> 標籤範例
  • CSS background-image 範例
  • 一鍵複製功能

💾 匯出功能​

  • 複製 Base64 字串
  • 複製 HTML/CSS 代碼

什麼是 Base64 編碼？​

Base64 是將二進位數據轉換為文字格式的編碼方式。將圖片編碼為 Base64 後，可以直接嵌入 HTML 或 CSS 中。

一般圖片 vs Base64​

一般方法：

<img src="image.png" alt="圖片" />

Base64 方法：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="圖片" />

優點​

✅ 減少 HTTP 請求​

  • 無需額外下載檔案
  • 縮短頁面載入時間（小圖片的情況）

✅ 單一檔案完成​

  • 一個 HTML 檔案包含所有內容
  • 適合用於電子郵件 HTML

✅ 無需 CDN/託管​

  • 不需要圖片託管伺服器
  • 消除外部依賴

✅ 立即可用​

  • 可立即渲染
  • 無快取問題（小檔案）

缺點​

❌ 檔案大小增加​

  • Base64 比原檔案大約增加 33% 大小
  • 不適合大型圖片

❌ 無法瀏覽器快取​

  • 每次都隨 HTML 一起傳送
  • 可重用性降低

❌ 代碼可讀性下降​

  • HTML/CSS 代碼變長
  • 維護困難

❌ 無法使用 CSS 精靈圖​

  • 無法使用圖片合併技術

何時應該使用？​

✅ 適合的情況​

  1. 圖示和小圖片（1-10KB）

    • UI 圖示
    • 項目符號
    • 小型標誌

  2. 單一 HTML 檔案

    • 電子郵件模板
    • 離線 HTML 文件
    • 簡報

  3. 需要立即顯示的情況

    • 首屏內容
    • 重要的 UI 元素

❌ 不適合的情況​

  1. 大型圖片（>50KB）

    • 照片
    • 背景圖片
    • 橫幅

  2. 重複使用的圖片

    • 多個頁面使用
    • 經常更新的圖片

  3. 對 SEO 重要的圖片

    • 產品圖片
    • 部落格文章圖片

支援格式​

  • JPG/JPEG：適合照片
  • PNG：支援透明背景
  • GIF：支援動畫
  • WebP：現代格式

使用範例​

HTML 圖片​

<img
  src="data:image/png;base64,iVBORw0KGg..."
  alt="說明"
  width="100"
  height="100"
/>

CSS 背景​

.element {
  background-image: url('data:image/png;base64,iVBORw0KGg...');
  background-size: cover;
  background-position: center;
}

響應式圖片​

<picture>
  <source
    media="(min-width: 768px)"
    srcset="data:image/png;base64,..."
  />
  <img src="data:image/png;base64,..." alt="說明" />
</picture>

優化技巧​

1. 圖片壓縮​

轉換為 Base64 前先壓縮圖片：

  • TinyPNG
  • ImageOptim
  • Squoosh

2. 選擇適當格式​

  • 照片：JPG（有損壓縮）
  • 圖示：PNG（無損、透明度）
  • 簡單圖形：SVG（向量）

3. 調整大小​

只使用所需大小：

  • 2x Retina：原始大小的 2 倍
  • 1x：實際顯示大小

4. 考慮延遲載入​

不直接使用 Base64：

// 需要時才載入
const base64 = 'data:image/png;base64,...';
img.src = base64;

安全考量​

⚠️ 注意 XSS 攻擊​

從使用者接收圖片時：

  • 驗證檔案類型
  • 限制檔案大小
  • 確認 Content-Type

⚠️ CSP（內容安全政策）​

Base64 圖片在 CSP img-src 政策中：

Content-Security-Policy: img-src 'self' data:;

隱私保護​

此工具完全在瀏覽器本地運行，不會將您的圖片上傳到任何伺服器。所有轉換過程都在您的設備上進行，確保圖片完全私密。

相關工具​

💬 這個工具對您有幫助嗎？​

歡迎隨時向我們發送您的意見或建議！