JPEG 品質設定の最適化 - ファイルサイズと画質のベストバランスを見つける
JPEG 品質パラメータの仕組み
JPEG の品質設定は 0 から 100 の数値で指定されることが一般的ですが、この数値は単純な「画質の割合」ではありません。JPEG エンコーダは画像を 8×8 ピクセルのブロックに分割し、各ブロックに対して離散コサイン変換 (DCT) を適用します。品質パラメータは、この DCT 係数を量子化する際のテーブル値を決定します。量子化テーブルは輝度 (Y) と色差 (Cb, Cr) で別々に定義され、人間の視覚が色差の変化に鈍感であることを利用して色差チャンネルをより積極的に圧縮します。
品質値が高いほど量子化テーブルの値が小さくなり、より多くの DCT 係数が保持されます。逆に品質値を下げると量子化テーブルの値が大きくなり、高周波成分が積極的に切り捨てられます。重要なのは、品質 100 であっても完全に無劣化ではないという点です。DCT 変換と逆変換の過程で浮動小数点の丸め誤差が発生するため、わずかな劣化は避けられません。
また、品質値とファイルサイズの関係は線形ではありません。品質 90 から 100 に上げた場合のファイルサイズ増加は、品質 50 から 60 に上げた場合よりもはるかに大きくなります。これは高品質域では保持すべき DCT 係数が急激に増えるためです。実用上、品質 85 を超えると人間の目では差を識別しにくくなる一方、ファイルサイズは顕著に増大します。
品質レベル別の画質とファイルサイズの比較
一般的な写真 (3,000 × 2,000 ピクセル) を異なる品質設定で書き出した場合の典型的なファイルサイズを比較します。元画像が約 18MB の非圧縮データだとすると、品質 100 で約 3.5MB、品質 90 で約 1.2MB、品質 80 で約 700KB、品質 60 で約 350KB、品質 30 で約 150KB 程度になります。
注目すべきは品質 90 と 80 の間です。ファイルサイズは約 40% 削減されますが、通常の閲覧条件では画質の差はほとんど知覚できません。一方、品質 60 以下になるとブロックノイズやモスキートノイズが目立ち始め、特にテキストを含む画像やシャープなエッジ部分で劣化が顕著になります。
SSIM (構造的類似性指標) で評価すると、品質 85 以上では SSIM 0.98 以上を維持できますが、品質 60 では 0.92 程度まで低下します。Web 用途では SSIM 0.95 以上を目安にすると、ユーザーに不快感を与えない品質を保てます。これは多くの場合、品質 75〜85 の範囲に相当します。
- 品質 90-100: 印刷用途、アーカイブ保存向け
- 品質 75-85: Web サイトの一般的な写真に最適
- 品質 60-74: サムネイル、プレビュー画像向け
- 品質 30-59: 極端な帯域制限環境でのみ使用
用途別の推奨品質設定
画像の用途によって最適な品質設定は大きく異なります。EC サイトの商品画像では、色の正確性とディテールの再現が売上に直結するため、品質 85〜90 を推奨します。特にアパレル商品では生地の質感が重要であり、品質を下げすぎると購買意欲に影響します。ジュエリーや時計など光沢のある商品も、ハイライトの階調が失われないよう高品質設定が必要です。
ブログやニュースサイトのアイキャッチ画像では、品質 75〜82 が実用的です。ファーストビューに表示される大きな画像は読み込み速度に直結するため、ファイルサイズの削減効果が大きいこの範囲が最適解となります。記事内の補足画像であれば品質 70 程度でも十分です。
SNS 向けの画像は、プラットフォーム側で再圧縮されることを考慮する必要があります。Twitter (X) は品質 85 程度で再圧縮するため、アップロード時に品質 92 以上で書き出しておくと、再圧縮後も許容範囲の画質を維持できます。Instagram も同様に再圧縮が行われるため、元画像は高品質で保持しておくべきです。
印刷用途では品質 95 以上を使用します。300dpi 以上の解像度と組み合わせることで、商業印刷にも耐えうる品質を確保できます。ただし、印刷ワークフローでは JPEG ではなく TIFF や PSD を使用するのが一般的です。
JPEG アーティファクトの種類と回避策
JPEG 圧縮で発生する代表的なアーティファクトには、ブロックノイズ、モスキートノイズ、カラーバンディングの 3 種類があります。それぞれの発生メカニズムと対策を理解することで、品質設定を適切に選択できます。
ブロックノイズは、8×8 ピクセルのブロック境界が目に見える格子状のパターンとして現れる現象です。低品質設定で特に顕著になり、空や壁面などの滑らかなグラデーション部分で目立ちます。対策としては品質を上げるか、書き出し前に軽いぼかしを適用してブロック間の差を減らす方法があります。
モスキートノイズは、高コントラストのエッジ周辺に発生するちらつきのようなアーティファクトです。テキストの周囲や、暗い背景に明るいオブジェクトがある場合に顕著です。テキストを含む画像では品質 85 以上を使用するか、PNG 形式を検討すべきです。
カラーバンディングは、滑らかなグラデーションが段階的な色の帯として表示される現象です。JPEG のクロマサブサンプリング (4:2:0) が原因の一つであり、4:4:4 サブサンプリングを使用することで軽減できます。ただし、4:4:4 はファイルサイズが約 30% 増加するため、グラデーションが重要な画像に限定して使用します。
プログレッシブ JPEG とベースライン JPEG の選択
JPEG にはベースラインとプログレッシブの 2 つのエンコード方式があります。ベースライン JPEG は上から下へ順次表示されるのに対し、プログレッシブ JPEG は最初にぼやけた全体像が表示され、段階的に鮮明になります。Web パフォーマンスの観点では、この選択がユーザー体験に影響します。
プログレッシブ JPEG は 10KB 以上のファイルでベースラインよりもファイルサイズが小さくなる傾向があります。これは複数スキャンにまたがるエントロピー符号化の効率が向上するためです。Google の PageSpeed Insights もプログレッシブ JPEG の使用を推奨しています。
ただし、プログレッシブ JPEG にはデコード時の CPU 負荷が高いというデメリットがあります。モバイルデバイスでは、多数のプログレッシブ JPEG を同時にデコードするとスクロール性能が低下する可能性があります。実測では、iPhone 12 以降のデバイスではこの差は無視できるレベルですが、古いデバイスをサポートする場合は考慮が必要です。
実装面では、<img> タグの decoding="async" 属性を併用することで、デコード処理をメインスレッドから分離し、UI のブロッキングを防止できます。プログレッシブ JPEG と非同期デコードの組み合わせが、現代の Web における最適解です。
ツール別の品質設定と自動最適化
主要な画像編集ツールでは品質パラメータの解釈が微妙に異なります。Photoshop の品質 8 (0-12 スケール) は、ImageMagick の品質 80 (0-100 スケール) とほぼ同等ですが、内部の量子化テーブルが異なるため完全には一致しません。ツール間で品質を比較する際は、出力ファイルサイズと SSIM 値で評価するのが確実です。
自動最適化ツールとして、mozjpeg は標準的な libjpeg よりも 5〜15% 小さいファイルを生成できます。トレリス量子化やカスタム量子化テーブルを使用して、同じ知覚品質でより効率的な圧縮を実現します。Web サーバーのビルドパイプラインに組み込むことで、手動設定なしに最適化された JPEG を配信できます。
さらに高度なアプローチとして、SSIM ベースの品質自動決定があります。目標 SSIM 値 (例: 0.96) を指定し、バイナリサーチで最適な品質パラメータを見つける方法です。画像の内容に応じて品質値が動的に変わるため、シンプルな写真は低い品質値で十分な画質を維持し、複雑なテクスチャを含む画像には高い品質値が自動的に割り当てられます。
cjpeg -quality 82 -progressive input.ppm > output.jpgconvert input.png -quality 82 -interlace Plane output.jpgsharp(input).jpeg({ quality: 82, progressive: true, mozjpeg: true })