PHP 使用 Base64 編碼圖片輸出與嵌入（Data URI、檔案儲存、效能權衡）

核心概念

• Base64 編碼：將二進位資料轉為 ASCII 字串，體積膨脹約 33%。
• Data URI：data:[mime];base64, 直接嵌入 HTML/CSS/JS，減少 HTTP 請求。
• 適用場景：小圖示（<1KB）、單頁應用關鍵圖片、郵件模板、離線頁面、API 回應內嵌圖片。

圖片 → Base64 字串（PHP 端）

function imageToBase64(string $imagePath): string {
    if (!file_exists($imagePath)) throw new InvalidArgumentException('Image not found');
    $mime = mime_content_type($imagePath); // 需 fileinfo 擴展
    $data = base64_encode(file_get_contents($imagePath));
    return "data:$mime;base64,$data";
}

// 使用
$imgDataUri = imageToBase64(__DIR__ . '/logo.png');
// 輸出：data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

Base64 字串 → 圖片輸出（直接瀏覽器顯示）

<?php
// show-base64.php
$base64 = 'iVBORw0KGgoAAAANSUhEUg...'; // 來自資料庫/快取/參數
$binary = base64_decode($base64);
if ($binary === false) {
    http_response_code(400);
    exit('Invalid Base64');
}
// 可從 Base64 標頭推斷 MIME，或固定
header('Content-Type: image/png');
header('Content-Length: ' . strlen($binary));
echo $binary;

HTML 嵌入方式比較

效能權衡與最佳實踐

• 小圖示（< 1KB）：Data URI 可接受，甚至優於請求開銷。
• 大圖片（> 10KB）：嚴禁 Data URI**，必須用獨立 URL + CDN + 快取標頭。
• 關鍵渲染路徑：首屏關鍵圖片（Logo、Hero Image）用 <link rel="preload" as="image" href="..."> + 獨立 URL。
• Base64 解碼成本：瀏覽器解碼 Base64 需 CPU 時間，移動裝置明顯。
• 資料庫儲存：圖片二進位存 BLOB 或檔案系統存路徑，**勿存 Base64 字串**（佔空間大、無法流式讀取、備份慢）。

<?php
// captcha.php
session_start();
$code = random_int(1000, 9999);
$_SESSION['captcha'] = $code;

$im = imagecreatetruecolor(120, 40);
$bg = imagecolorallocate($im, 255, 255, 255);
$text = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 120, 40, $bg);
imagettftext($im, 20, 0, 15, 30, $text, __DIR__ . '/fonts/arial.ttf', $code);
// 干擾線...
header('Content-Type: image/png');
imagepng($im);
imagedestroy($im);