首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

PHP 將 JPEG 轉換為 Progressive JPEG(漸進式 JPEG)提升用戶體驗

     編輯:PHP 綜合知識

兩種 JPEG 顯示模式對比

特性Baseline JPEG (標準)Progressive JPEG (漸進式)
掃描方式單次掃描,頂部到底部多次掃描,模糊→清晰
加載體驗逐行顯示,慢網下長時間空白先顯示縮圖輪廓,隨著下載細化
文件大小略小略大(通常 +2~10%)
適用場景小圖標、內網高速環境大圖、公網、移動端、弱網

PHP 一鍵轉換代碼

<?php
$src = 'input.jpg';
$dst = 'output_progressive.jpg';

$im = imagecreatefromjpeg($src);
if (!$im) die('無法讀取源圖片');

// 關鍵:開啟隔行掃描標記
imageinterlace($im, true);  // 或 1

// 輸出,質量 80 平衡體積與清晰度
imagejpeg($im, $dst, 80);
imagedestroy($im);

echo "轉換完成:$dst";
?>

驗證是否生效

使用 ImageMagick identify 命令:

identify -verbose output_progressive.jpg | grep Interlace
# 輸出 Interlace: JPEG 即為漸進式
# 若輸出 Interlace: None 則為標準模式

批量轉換腳本

<?php
$dir = 'images/';
$quality = 80;

$iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($dir));
foreach ($iterator as $file) {
    if ($file->isFile() && in_array(strtolower($file->getExtension()), ['jpg','jpeg'])) {
        $src = $file->getPathname();
        $dst = $src . '.prog.jpg'; // 或覆蓋原文件

        $im = @imagecreatefromjpeg($src);
        if ($im) {
            imageinterlace($im, true);
            imagejpeg($im, $dst, $quality);
            imagedestroy($im);
            echo "OK: $src\n";
        } else {
            echo "FAIL: $src\n";
        }
    }
}
?>

原理補充

  • imageinterlace($im, true) 設置 PNG 的隔行掃描標記,對 JPEG 創建時生效,使編碼器輸出多掃描數據
  • GD 庫底層調用 libjpeg 的 jpeg_write_scanlines 多次寫入
  • 瀏覽器解碼器(如 libjpeg-turbo)識別標記後啟用漸進渲染

最佳實踐

  1. 大圖(>50KB)強制轉 Progressive
  2. 上傳處理管道集成自動轉換
  3. CDN 邊緣節點可配合 image_filter 實時轉換
  4. 配合 WebP 格式並存,<picture> 標簽按支持度選擇
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved