PHP 將 Baseline JPEG 轉換為 Progressive JPEG（漸進式 JPEG）完整指南

前言

JPEG 格式有兩種存儲方式：Baseline JPEG（基線/順序式） 與 Progressive JPEG（漸進式）。兩者文件大小、圖像數據、副檔名完全相同，唯一區別在於顯示渲染方式。本文詳解兩者差異，並提供 PHP GD 庫一鍵轉換代碼與驗證方法。

兩種格式對比

Baseline JPEG（傳統順序掃描）

• 數據按「從上到下、逐行順序」存儲。
• 加載顯示時：從頂部開始，一行行向下渲染，直到全部加載完成。
• 大圖/慢網絡下：用戶長時間看到空白或半張圖，體驗差。
• 無顯著優勢，現代 Web 開發不推薦。

Progressive JPEG（多次掃描/隔行掃描）

• 文件包含多次掃描數據，按質量從低到高順序存儲。
• 加載顯示：先顯示模糊全貌輪廓，隨著數據下載逐漸清晰。
• 核心優勢：慢網絡下用戶能立即看到圖片大致內容，感知加載更快。
• 大型網站（QQ空間、微博、電商圖片）普遍採用。

PHP 一鍵轉換代碼

利用 GD 庫的 imageinterlace() 函數即可實現轉換：

<?php
// 1. 從文件創建圖像資源
$im = imagecreatefromjpeg('file.jpg');

// 2. 關鍵步驟：開啟隔行掃描（漸進式）
// 參數 1 表示開啟，0 表示關閉
imageinterlace($im, 1);

// 3. 輸出新文件，第三參數 80 為質量（0-100）
imagejpeg($im, './outfile.jpg', 80);

// 4. 釋放資源
imagedestroy($im);
?>

說明： imageinterlace($im, 1) 設置隔行掃描標記，輸出時自動生成 Progressive JPEG。質量參數建議 75-85 平衡體積與清晰度。

批量轉換腳本示例

<?php
function convertToProgressive($srcDir, $dstDir, $quality = 80) {
    if (!is_dir($dstDir)) mkdir($dstDir, 0755, true);
    
    $files = glob($srcDir . '/*.{jpg,jpeg,JPG,JPEG}', GLOB_BRACE);
    foreach ($files as $file) {
        $im = @imagecreatefromjpeg($file);
        if (!$im) continue;
        
        imageinterlace($im, 1);
        $filename = basename($file);
        imagejpeg($im, $dstDir . '/' . $filename, $quality);
        imagedestroy($im);
        echo "Converted: $filename\n";
    }
}

convertToProgressive('./images', './progressive_images', 80);
?>

如何驗證圖片格式

方法一：ImageMagick identify 命令（推薦）

identify -verbose outfile.jpg

輸出中查找 Interlace 字段：

• Interlace: JPEG 或 Interlace: Line → Progressive JPEG
• Interlace: None → Baseline JPEG

方法二：PHP 代碼檢測

<?php
function isProgressiveJpeg($filename) {
    $data = file_get_contents($filename, false, null, 0, 12); // 讀取頭部
    // 檢查 SOF 標記 (0xFFC0 Baseline, 0xFFC2 Progressive)
    // 簡易檢測：搜索 0xFFC2 標記
    return strpos($data, chr(0xFF).chr(0xC2)) !== false;
}

var_dump(isProgressiveJpeg('outfile.jpg')); // true/false
?>

方法三：瀏覽器開發者工具

Network 面板查看圖片響應頭 Content-Type: image/jpeg 無法區分。需配合上述工具或觀察加載行為：模糊→清晰為 Progressive。

性能與體積考量

• Progressive JPEG 文件體積通常 略大（約 2-10%） 或持平。
• 解碼端（瀏覽器/客戶端）需稍多 CPU 處理多掃描數據，現代設備影響可忽略。
• 對於大圖（>50KB）、移動端、弱網環境，體驗提升遠大於體積代價。
• 小圖標、圖標字體替代方案（SVG/WebP）更優。

現代替代方案：WebP / AVIF

若項目允許，強烈建議直接轉換為 WebP（支持有損/無損、透明、動畫）或 AVIF（更高壓縮比）：

<?php
// PHP 7.0+ GD 支持 WebP
$im = imagecreatefromjpeg('file.jpg');
imagewebp($im, 'file.webp', 80); // 質量 80
imagedestroy($im);

// 瀏覽器端使用  標籤兼容
/>
<picture>
  <source type="image/webp" srcset="file.webp">
  <img src="file.jpg" alt="Fallback">
</picture>

總結

Progressive JPEG 以極低成本（一行代碼）顯著提升大圖加載體驗，是圖片優化的「必做項」。PHP GD 的 imageinterlace($im, 1) 讓轉換毫無門檻。配合 ImageMagick 驗證，構建自動化圖片處理流水線，讓用戶告別「一行行加載」的等待。