JPEG圧縮のベストプラクティス：品質設定と最適化のヒント

JPEGは1990年代初頭からWeb写真のバックボーンであり、今後もその地位は変わりません。WebPやAVIFの台頭にもかかわらず、HTTP Archive Web Almanac 2024によると、JPEGはWeb上で転送されるすべての画像バイトの40%以上を占めています。すべてのブラウザがサポートし、すべての画像エディタがエクスポートし、すべてのCMSが設定なしで処理します。Web上で画像を扱うなら、JPEG圧縮の仕組みと最大限に活用する方法を理解する必要があります。

課題は、JPEGが非可逆フォーマットであり、圧縮ツールの品質スライダーが内部で行っていることが、ほとんどの人が認識しているよりもはるかに複雑だということです。品質75と品質85の違いはファイルサイズで40%かもしれませんが、人間の目にはほぼ見分けがつきません。品質60と品質50の違いはさらに15%の節約になるかもしれませんが、グラデーション領域で目に見えるバンディングが発生する可能性があります。

このガイドでは、JPEG圧縮の技術的基礎を解説し、あらゆる一般的なユースケースに対する具体的な品質設定を提供し、ImgCompress.appを使った実際の圧縮前後のデータとともにJPGファイルの最適化手順を紹介します。

JPEG圧縮の内部動作

圧縮パイプラインを理解することで、品質設定についてより賢明な判断ができるようになります。JPEG規格は、国際電気通信連合が発行したITU-T T.81仕様で正式に定義されており、ファイルサイズを削減するための多段階プロセスを使用します。各段階が品質とファイルサイズのトレードオフに異なるレバーを提供します。

色空間変換とクロマサブサンプリング

最初のステップは、画像をRGB（赤、緑、青）からYCbCr色空間に変換します。Yは輝度（明るさ）、CbとCrは色差（色の違い）を表します。この分離が重要なのは、人間の視覚が色の変化よりも明るさの変化にはるかに敏感だからです。JPEGエンコーダーはクロマサブサンプリングという技術でこの生物学的事実を利用します。

クロマサブサンプリングは、輝度チャンネルをフル解像度に保ちながら色チャンネルの解像度を下げます。3つの一般的なサブサンプリング比は：

• 4:4:4 — サブサンプリングなし。3つのチャンネルすべてがフル解像度で保存されます。最大の色精度を保持しますが、圧縮効果は最小です。飽和色の商品写真や医療画像など、色精度が重要な画像に使用します。
• 4:2:2 — 色チャンネルが輝度チャンネルの水平解像度の半分でサンプリングされます。色差データを約33%削減し、ほとんどの写真への視覚的影響は最小限です。高品質Web画像の良い中間点です。
• 4:2:0 — 色チャンネルが水平・垂直の両方向で半分の解像度でサンプリングされ、色差データを75%削減します。ImgCompress.appを含むほとんどのJPEGエンコーダーとWeb圧縮ツールのデフォルトです。Web表示サイズで表示される一般的な写真コンテンツでは、4:4:4との品質差は無視できます。

Mozilla MDN Web DocsのJPEGに関するドキュメントに記載されているように、4:2:0サブサンプリングスキームは写真コンテンツに対してファイルサイズと知覚品質の最良のバランスを提供するため、Web上で最も広く使用されている設定です。

離散コサイン変換（DCT）

色空間変換後、エンコーダーは各チャンネルを8×8ピクセルブロックに分割し、各ブロックに離散コサイン変換を適用します。DCTは空間ピクセルデータを周波数係数に変換します。つまり、ブロックを異なる周波数のコサイン波パターンのセットに分解します。

低周波係数はブロック内の広い色と明るさのグラデーションを表します。高周波係数はシャープなエッジ、テクスチャ、ノイズなどの細かいディテールを表します。重要な洞察は、一般的な写真の視覚情報のほとんどが低周波係数に集中しているということです。高周波データは、視聴者が気づかないまま削減または除去できることが多いです。

量子化：品質低下が実際に起こる場所

量子化はデータが永久に破棄されるステップであり、選択する品質設定によって直接制御されます。エンコーダーは各DCT係数を量子化テーブルの対応する値で割り、結果を最も近い整数に丸めます。量子化テーブルの除数が大きいほど、丸めがより積極的になり、ファイルは小さくなりますが、失われる情報も多くなります。

品質スライダーを90から70に下げると、特に高周波係数に対してより大きな除数を持つ量子化テーブルを使用するようエンコーダーに指示しています。JPEG画像の圧縮アーティファクトが通常ブロックノイズ（8×8ブロック境界が見える）とリンギング（シャープなエッジ周辺のハロー）として現れるのはこのためです。これらは高周波ディテールを量子化で除去した視覚的結果です。

エントロピー符号化

最終段階は、量子化された係数に可逆エントロピー符号化（ベースラインJPEGではハフマン符号化、一部の実装では算術符号化）を適用します。このステップは追加の品質低下なしにデータをさらに圧縮します。エンドユーザーとしてこの段階に影響を与えることはあまりできませんが、MozJPEGのような最適化されたJPEGエンコーダーは標準よりも効率的なハフマンテーブルを適用し、品質コストなしで追加の2〜5%のファイルサイズ削減を絞り出します。

品質設定ガイド：いつ何を使うか

品質スライダーはJPEG画像を圧縮する際の最も重要なコントロールです。さまざまなコンテンツタイプの数百枚の画像でのテストに基づく実用的なリファレンス表は以下の通りです：

SSIMスコアについて： 構造的類似性指標（SSIM）は0から1のスケールで知覚的な視覚品質を測定し、1.0はオリジナルと同一を意味します。0.95以上のスコアはほとんどの視聴者にとって視覚的にロスレスと見なされます。0.98以上のスコアは注意深い検査でもオリジナルと区別がつきません。これらの値は、Wang et al. 2004の原論文で記述されたSSIMアルゴリズムを使用して、圧縮出力を未圧縮TIFFソースファイルと比較して測定しました。

80%ルール

どこから始めるか迷ったら、品質80がWeb上の写真JPEGコンテンツに対する最良のデフォルトです。この設定では通常：

• 未圧縮オリジナルと比較して78〜84%のファイルサイズ削減
• 0.96以上のSSIMスコア、つまり通常の視聴距離で圧縮画像がソースと知覚的に同一
• 一般的なWeb表示サイズ（約1200px幅まで）でブロックノイズやリンギングアーティファクトなし

品質80から、具体的な画像とコンテキストに基づいて上下に調整できます。大きな滑らかなグラデーション（空、肌の色調）を持つ画像はバンディングを避けるために85に上げると良いかもしれません。細かいテクスチャ（葉、布）が多い画像は、目に見える違いなしに75まで下げられることが多いです。

品質 vs ファイルサイズ：収穫逓減カーブ

JPEG品質設定について理解すべき最も重要なことの一つは、品質とファイルサイズの関係が線形ではないということです。4000×3000ピクセルの風景写真を異なる品質レベルで圧縮した測定結果は以下の通りです：

最も急激な低下は品質100から90の間で起こります。ファイルサイズの72%を失いながらSSIMはほとんど動きません。品質80から60の間では、さらに8ポイントのファイルサイズ節約がありますが、SSIMは顕著に低下します。品質50以下では、ほとんどの写真コンテンツでアーティファクトが明確に見えるようになります。

これが80〜85の範囲がほとんどのWebユースケースのスイートスポットである理由です。圧縮効果の大部分を捉えながら、知覚的にロスレスなゾーン内に十分収まっています。

プログレッシブJPEG vs ベースラインJPEG

JPEGファイルにはベースラインとプログレッシブの2つのエンコードモードがあります。違いはブラウザでの画像の読み込み方に影響し、ファイルサイズにも影響する場合があります。

ベースラインJPEG

ベースラインエンコーディングは画像データを上から下への単一スキャンで保存します。ブラウザはデータが到着するにつれて行ごとに画像をレンダリングします。遅い接続では、画像の上部が最初に表示され、残りはデータがダウンロードされるにつれて表示されます。ほとんどが読み込まれるまで全体像がわからないため、もたつく感じがします。

プログレッシブJPEG

プログレッシブエンコーディングは画像を詳細度が増す複数のスキャンで保存します。最初のスキャンには画像全体の低解像度バージョンが含まれます。後続のスキャンがフル品質の画像が完成するまでディテールを追加します。ブラウザはぼやけたプレビューをほぼ即座に表示し、データが到着するにつれて鮮明にします。

どちらを選ぶべきか？

Web配信には、プログレッシブJPEGがほぼ常に良い選択です。その理由は：

• 体感パフォーマンス — ユーザーは完全な（ぼやけていても）画像をはるかに早く見ることができ、合計ダウンロード時間が同じでもより速く感じます。ヒーロー画像やファーストビューのコンテンツに特に価値があります。
• ファイルサイズ — 約10 KBより大きい画像では、プログレッシブJPEGファイルはベースライン同等品よりわずかに小さいことが多いです（通常2〜5%小さい）。マルチスキャン構造によりエントロピーコーダーが周波数スペクトル全体でより効率的に動作できるためです。
• 互換性 — すべてのモダンブラウザがプログレッシブJPEGを正しく処理します。2025年に互換性の懸念はありません。

ベースラインが好ましい唯一のシナリオは、非常に小さな画像（10 KB未満）で、プログレッシブスキャン構造のオーバーヘッドが実際にファイルをわずかに大きくする場合です。5 KB未満のサムネイルでは、どちらの違いも無視できます。

ImgCompress.appはデフォルトでプログレッシブJPEGを生成するため、追加設定なしでこの最適化が自動的に得られます。

チュートリアル：ImgCompress.appでJPEG画像を最適化

実践的な最適化ワークフローを解説します。3枚の写真を異なる解像度で撮影し、複数の品質レベルで圧縮して、何が期待できるかを正確にお見せします。

テスト設定

• ソース画像：3枚の高解像度写真 — 風景（5472×3648、4.8 MB）、ポートレート（3200×4800、3.2 MB）、商品写真（2400×2400、1.9 MB）。すべてのオリジナルは未圧縮TIFFファイルから最大品質JPEGに変換したもの。
• ツール：MacBook Pro（M2、16 GB RAM）のChrome 122でクライアントサイド実行のImgCompress.app。
• 方法：各画像をJPEG出力フォーマットで品質60、75、80、90で圧縮。すべての処理はブラウザ内でローカルに実行 — ファイルがサーバーにアップロードされることはなし。

ステップバイステップのプロセス

1. ブラウザでImgCompress.appにアクセスします。
2. JPEGファイルをアップロードエリアにドラッグします。バッチ処理のために複数ファイルを一度にドロップできます。
3. 出力フォーマットとしてJPEGを選択し、スライダーで希望の品質レベルを設定します。
4. 圧縮をクリックします。解像度とデバイスに応じて画像1枚あたり1〜3秒で処理されます。
5. 圧縮前後のプレビューを使用してフルズームで結果を検査します。グラデーション領域、細かいテクスチャ、シャープなエッジに注意してください。アーティファクトが最初に現れる場所です。
6. 圧縮ファイルをダウンロードするか、バッチ処理した場合はすべてのファイルをZIPとしてダウンロードします。

異なる品質レベルでの結果

品質80では、3枚すべての画像が約90%のファイルサイズ削減を達成しました。風景は4.8 MBから480 KBに。ポートレートは3.2 MBから340 KBに。商品写真は1.9 MBから195 KBに。いずれの場合も、通常のWeb表示サイズで圧縮画像はオリジナルと視覚的に区別がつきませんでした。

品質60では、節約が94%を超えましたが、注意深い検査で風景画像の空のグラデーションにわずかなバンディングと、ポートレートの細かい髪のディテールのわずかなソフト化が見られました。サムネイルや小さなサイズで表示される画像には品質60で十分です。ヒーロー画像や商品ディテールビューには品質75〜80がより安全な選択です。

よくあるJPEG圧縮の間違いと回避方法

経験豊富な開発者でもJPEG圧縮で犯しがちな間違いがあります。最も一般的な落とし穴とその回避方法を紹介します。

すでに圧縮されたJPEGの再圧縮

これが最もダメージの大きい間違いです。JPEGを開き、編集し、再びJPEGとして保存するたびに、画像は完全な非可逆圧縮パイプラインを再度通過します。各世代が前回の上に複合する量子化アーティファクトを導入します。3〜4回の再圧縮後、品質劣化が明確に見えるようになります。特に滑らかなグラデーションや細かいディテールのある領域で顕著です。

対策：常にオリジナルの高品質ソースファイル（RAW、TIFF、または最大品質JPEG）を保持してください。新しい出力が必要なたびにソースから圧縮してください。JPEGを別のフォーマットに変換する必要がある場合、画像フォーマット変換ガイドでプロセス中の品質低下を最小限に抑える方法を解説しています。

Web画像に品質100を使用

品質100は「圧縮なし」を意味しません。「最小量子化」を意味し、結果のファイルは巨大です。品質90の3〜5倍の大きさになることが多く、知覚的な視覚差はありません。上のデータ表が示すように、品質100から90に下げるとSSIMが0.99以上を維持しながらファイルサイズの70%以上を節約できます。

対策：Web配信に品質100を使用しないでください。一般的な用途には80から始め、具体的な理由（印刷準備、アーカイブ保存）がある場合のみ90以上にしてください。

クロマサブサンプリング設定の無視

ほとんどの圧縮ツールはデフォルトで4:2:0クロマサブサンプリングを使用しており、写真コンテンツの大多数に対して正しい設定です。しかし、細かい色ディテールを持つ画像 — 飽和した赤や青の商品写真、細い色付き線を含む画像など — を圧縮する場合、4:2:0はエッジで目に見える色にじみを引き起こす可能性があります。

対策：色精度が重要な画像には、圧縮ツールが4:4:4サブサンプリングオプションを提供しているか確認してください。ファイルは大きくなりますが、色の忠実度が保持されます。標準的なWeb写真には4:2:0が正しいデフォルトです。

スクリーンショットやグラフィックをJPEGとして圧縮

JPEGは連続階調の写真コンテンツ向けに設計されています。シャープなエッジ、ソリッドカラーブロック、テキストを持つ画像 — UIスクリーンショット、ロゴ、チャート、図表など — はJPEGでは圧縮が悪く、エッジ周辺に目に見えるリンギングアーティファクトが現れることが多いです。

対策：可逆品質が必要なスクリーンショットやグラフィックにはPNGを、品質とファイルサイズの良いバランスにはWebPを使用してください。各フォーマットの使い分けの詳細な分析については、WebP vs PNG比較をご覧ください。

複数デバイスでのテスト不足

デスクトップモニターでは見えない圧縮アーティファクトが、高DPIモバイル画面ではより目立つ場合があります（逆もまた然り）。視聴距離、画面サイズ、ピクセル密度のすべてがアーティファクトの知覚に影響します。

対策：デスクトップに加えて少なくとも1台のモバイルデバイスで圧縮画像を必ずプレビューしてください。ユーザー体験にとって重要なヒーロー画像や商品写真には特に注意を払ってください。

まとめ

JPEG圧縮は表面上は欺くほどシンプルです — スライダーを動かして小さなファイルを得る — しかし技術的な詳細が重要です。DCT、量子化、クロマサブサンプリングがどのように相互作用するかを理解することで、推測ではなく情報に基づいた品質設定の判断ができるようになります。

実用的なポイントはシンプルです：デフォルトの出発点として品質80を使用し、Web配信にはプログレッシブエンコーディングを優先し、常に最高品質のソースファイルから圧縮し、画像の表示コンテキストに品質設定を合わせてください。サムネイルは60〜70%まで下げられます。ヒーロー画像は85〜90%が適切です。品質100はWeb配信にはほぼ正解ではありません。

JPEG画像を最適化する準備はできましたか？無料画像コンプレッサーをお試しください。ブラウザ内ですべてをローカルに処理し、バッチアップロードに対応し、デフォルトでプログレッシブJPEGを生成します。サインアップ不要、ファイルアップロード不要、プライバシーの懸念なし。

関連記事：

• 画像圧縮完全ガイド2025：ファイルサイズを90%削減する方法
• WebP vs PNG：2025年版フォーマット完全比較ガイド
• 画像フォーマット変換ガイド：JPG、PNG、WebP、AVIF徹底解説