PNGおよびWebP画像最適化：imageminプラグインの技術的比較

フロントエンド開発において、画像の最適化はパフォーマンス改善の鍵です。imagemin-optipng、imagemin-pngout、imagemin-pngquant、imagemin-webpは、それぞれ異なるアプローチでPNGやWebP画像を処理します。この記事では、各プラグインの内部動作、設定方法、実用上のトレードオフをコード付きで解説します。

🖼️ 圧縮方式：lossless vs lossy vs フォーマット変換

imagemin-optipng と imagemin-pngout は lossless（可逆）圧縮 を行います。元の画像と完全に同じ画質を保ちつつ、メタデータの削除やIDATチャンクの再エンコードによってファイルサイズを削減します。

// imagemin-optipng: lossless圧縮
import imagemin from 'imagemin';
import optipng from 'imagemin-optipng';

await imagemin(['images/*.png'], {
  destination: 'build/images',
  plugins: [optipng({ optimizationLevel: 3 })]
});

// imagemin-pngout: lossless圧縮（より高圧縮）
import imagemin from 'imagemin';
import pngout from 'imagemin-pngout';

await imagemin(['images/*.png'], {
  destination: 'build/images',
  plugins: [pngout()]
});

imagemin-pngquant は lossy（非可逆）圧縮 を行います。色数を減らすことでファイルサイズを大幅に削減しますが、画質に若干の劣化が生じます。

// imagemin-pngquant: lossy圧縮
import imagemin from 'imagemin';
import pngquant from 'imagemin-pngquant';

await imagemin(['images/*.png'], {
  destination: 'build/images',
  plugins: [pngquant({ quality: [0.6, 0.8] })]
});

imagemin-webp は フォーマット変換 を行います。PNGやJPEGをWebP形式に変換し、lossyまたはlosslessのいずれかで圧縮します。

// imagemin-webp: PNG → WebP変換
import imagemin from 'imagemin';
import webp from 'imagemin-webp';

await imagemin(['images/*.png'], {
  destination: 'build/images',
  plugins: [webp({ quality: 80 })]
});

⚙️ 設定オプションとカスタマイズ性

各プラグインは、ユースケースに応じて細かく調整可能です。

imagemin-optipng の設定

optimizationLevel（0〜7）で圧縮レベルを指定。数値が高いほど圧縮率は向上しますが、処理時間も増加します。

optipng({
  optimizationLevel: 5 // デフォルトは3
})

imagemin-pngout の設定

copy オプションでメタデータの保持を制御できます。

pngout({
  copy: 'all' // デフォルトは 'none'
})

imagemin-pngquant の設定

quality は [min, max] の配列で指定。圧縮後の品質を動的に調整します。

pngquant({
  quality: [0.65, 0.8], // 65%〜80%の品質範囲
  speed: 1 // 1（高圧縮）〜11（高速）
})

imagemin-webp の設定

lossless を true にすると可逆圧縮になります。quality はlossy時の画質を制御します。

webp({
  lossless: false,
  quality: 85,
  alphaQuality: 90
})

⏱️ 実行時間と圧縮率のトレードオフ

• imagemin-optipng: 処理速度が速く、中程度の圧縮率。日常的なビルドに最適。
• imagemin-pngout: 圧縮率は最高クラスだが、処理に数秒〜数十秒かかる場合も。リリースビルドでの最終最適化向き。
• imagemin-pngquant: 数百ミリ秒で劇的なサイズ削減。画質劣化を許容できるなら最強の選択肢。
• imagemin-webp: WebPエンコーダーの速度に依存。通常は高速で、PNGより30%以上小さいファイルが得られる。

💡 実際のプロジェクトでは、pngquant + optipng の組み合わせも有効です。まずpngquantで色数を減らし、その後optipngでlossless最適化を行うことで、さらなるサイズ削減が可能です。

// pngquant → optipngのチェーン
await imagemin(['images/*.png'], {
  destination: 'build/images',
  plugins: [
    pngquant({ quality: [0.6, 0.8] }),
    optipng({ optimizationLevel: 3 })
  ]
});

🌐 ブラウザサポートとフォールバック戦略

• PNGプラグイン（optipng/pngout/pngquant）: 全てのブラウザで問題なく表示可能。
• WebPプラグイン: Safari 14未満、IEなど一部ブラウザで非対応。

WebPを使う場合は、<picture>要素でフォールバックを提供するのがベストプラクティスです。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="Description">
</picture>

📊 まとめ：どのプラグインを選ぶべきか？

• 汎用的な最適化 → imagemin-optipng
• 最大限のPNG圧縮 → imagemin-pngout（時間的余裕がある場合）
• モバイルファーストでサイズ重視 → imagemin-pngquant
• 最新ブラウザ向けの次世代画像 → imagemin-webp（フォールバック必須）

最終的には、プロジェクトの要件（画質優先かサイズ優先か）、ターゲットブラウザ、ビルド時間の制約を考慮して選択してください。