プログレッシブJPEG最適化：baselineとの違い・mozjpeg/Sharpの実務

// scripts/jpeg-progressive.ts
// 依存: npm i -D sharp tsx
// 使い方:
//   $env:Q=78; $env:SUB='4:2:0'; npx tsx scripts/jpeg-progressive.ts
//   ※ Windows PowerShell 前提（SUB= '4:4:4' も可）

import fs from "node:fs/promises";
import path from "node:path";
import sharp from "sharp";

const INPUT = process.env.IN ?? "input";   // 入力フォルダ
const OUTPUT = process.env.OUT ?? "output"; // 出力フォルダ
const Q = Number(process.env.Q ?? 78);
const SUB = (process.env.SUB ?? "4:2:0") as "4:2:0" | "4:4:4";

async function main() {
  await fs.mkdir(OUTPUT, { recursive: true });
  const files = (await fs.readdir(INPUT)).filter(f => /\.(jpe?g|png|webp)$/i.test(f));

  for (const f of files) {
    const src = path.join(INPUT, f);
    const out = path.join(OUTPUT, path.parse(f).name + ".jpg");

    await sharp(src)
      .rotate()                       // EXIFの回転を適用
      .toColourspace("srgb")          // ICCを落としても色が変わらないよう sRGB 化
      .jpeg({
        quality: Q,                   // 目安: 70–82
        progressive: true,            // Progressive JPEG を有効化
        mozjpeg: true,                // mozjpeg が有効なら最適化を使用
        chromaSubsampling: SUB        // 4:2:0（写真）/ 4:4:4（文字・イラスト）
      })
      .toFile(out);

    console.log("→", out);
  }
}

main().catch(err => { console.error(err); process.exit(1); });

// package.json（抜粋）
{
  "devDependencies": { "sharp": "^0.33.0", "tsx": "^4.0.0" },
  "scripts": {
    "jpeg:progressive": "tsx scripts/jpeg-progressive.ts"
  }
}
// 実行例（PowerShell）
//   $env:Q=80; $env:SUB='4:2:0'; npm run jpeg:progressive
//   # 入出力パスの変更
//   $env:IN='assets/raw'; $env:OUT='public/img'; npm run jpeg:progressive

// app/(example)/page.tsx（LCP画像の例）
// Progressive JPEG を用意したうえで next/image で配信
import Image from "next/image";

export default function Example() {
  return (
    <Image
      src="/img/hero.jpg"            // Progressive JPEG
      alt="Hero"
      width={1600}
      height={900}
      priority                          // LCP対策（初回表示は優先読み込み）
      sizes="(min-width: 1024px) 1200px, 100vw"
      placeholder="empty"               // LQIPと併用するなら blurDataURL を設定
    />
  );
}