PHP 將圖片轉為 Base64 Data URI 內嵌網頁

Data URI 方案允許將小型圖片直接以 Base64 編碼嵌入 HTML/CSS/JS，減少 HTTP 請求，提升首屏加載速度。本文演示 PHP 實現圖片轉 Base64 並生成 <img> 標籤的完整流程。

核心代碼

$img_file = 'https://img.alicdn.com/bao/uploaded/TB1eaiELpXXXXcPXpXXSutbFXXX.jpg'; 

// 1. 獲取圖片信息（含 MIME 類型） 
$img_info = getimagesize($img_file); 

// 2. 讀取文件內容並 Base64 編碼 
$img_src = "data:{$img_info['mime']};base64," . base64_encode(file_get_contents($img_file)); 

// 3. 輸出 img 標籤 
exit("<img src='{$img_src}' />");

Data URI 格式詳解

data:[<mediatype>][;base64],<data>
mediatype 例：image/jpeg, image/png, image/gif
base64    表示數據經 Base64 編碼
data      編碼後的字符串

支援的常見類型

• data:image/gif;base64,...
• data:image/png;base64,...
• data:image/jpeg;base64,...
• data:image/x-icon;base64,... (favicon)
• data:text/css;base64,... (CSS 內嵌)
• data:text/javascript;base64,... (JS 內嵌)

適用場景與限制

工程化建議

• 尺寸閾值：建議 < 10KB（Base64 後 ~13KB）的小圖標、背景圖使用
• 構建時注入：Webpack/Vite/Gulp 構建階段自動轉換，而非運行時 PHP 處理
• CSS 背景圖：background: url(data:image/png;base64,...) 同理適用
• 緩存策略：配合 HTML 緩存或 Service Worker 緩存包含 Data URI 的頁面

推薦在線工具

• 圖片轉 Base64 在線工具
• ICO 圖標在線生成
• 圖片格式轉換 (jpg/bmp/gif/png)

合理使用 Data URI 可顯著優化關鍵渲染路徑，但切勿濫用於大圖，否則得不償失。