画像圧縮の仕組みを徹底解説 - JPEG ・ PNG ・ WebP の違い
画像圧縮とは何か - データ量を減らす 2 つのアプローチ
画像圧縮とは、画像データのファイルサイズを小さくする技術です。Web ページの表示速度に直結するため、フロントエンド開発者やデザイナーにとって避けて通れない知識といえます。HTTP Archive の調査によると、Web ページの総転送量の約 50% を画像が占めており、画像の最適化はパフォーマンス改善の最も効果的な手段の一つです。
圧縮方式は大きく 2 種類に分かれます。
- 可逆圧縮 (ロスレス): 圧縮前のデータを完全に復元できる方式。PNG が代表例で、データの冗長性を排除して圧縮します。テキストや図形など、色の境界がはっきりした画像に適しています。圧縮率は画像の内容に依存し、一般的に 2:1 から 10:1 程度です。
- 非可逆圧縮 (ロッシー): 人間の目に知覚されにくい情報を削除してサイズを大幅に削減する方式。JPEG が代表例で、写真のような自然画像に適しています。一度圧縮すると元のデータには戻せませんが、圧縮率は 10:1 から 100:1 まで調整可能です。
どちらの方式を選ぶかは、画像の用途と求められる品質によって決まります。Web 用途では、表示品質とファイルサイズのバランスが最も重要な判断基準です。人間の視覚特性を利用した非可逆圧縮は、写真では品質劣化がほぼ知覚されないレベルまでサイズを削減できるため、Web パフォーマンスの観点から非常に有効です。
JPEG の圧縮原理 - DCT による周波数変換
JPEG は離散コサイン変換 (DCT: Discrete Cosine Transform) を核とする非可逆圧縮フォーマットです。1992 年に標準化されて以来、30 年以上にわたり写真フォーマットのデファクトスタンダードとして君臨しています。圧縮プロセスは以下のステップで進行します。
- 色空間変換: RGB から YCbCr に変換し、輝度 (Y) と色差 (Cb, Cr) に分離します。人間の目は輝度の変化に敏感で色差には鈍感なため、色差チャンネルを間引く (クロマサブサンプリング 4:2:0) ことでデータ量を最大 50% 削減します。
- ブロック分割と DCT: 画像を 8x8 ピクセルのブロックに分割し、各ブロックに DCT を適用します。空間領域の情報が周波数領域に変換され、低周波成分 (なだらかな変化) と高周波成分 (細かいディテール) に分離されます。DCT は情報を失わない可逆変換であり、この段階ではまだ劣化は発生しません。
- 量子化: DCT 係数を量子化テーブルで割り算し、高周波成分を積極的にゼロに丸めます。この工程で情報が失われますが、品質パラメータ (1-100) で量子化の強さを制御できます。品質 85 前後が Web 用途での実用的なバランスポイントです。量子化テーブルは輝度と色差で別々に設定され、色差チャンネルにはより強い量子化が適用されます。
- エントロピー符号化: 量子化後の係数をジグザグスキャンで 1 次元配列に変換し、ランレングス符号化とハフマン符号化で圧縮して最終的なファイルを生成します。ゼロが連続する高周波成分を効率的に符号化できるため、量子化で多くのゼロが生成されるほど圧縮率が向上します。
JPEG の弱点は、テキストや線画のようなエッジがシャープな画像でブロックノイズ (モスキートノイズ) が目立つことです。8x8 ブロック単位で処理するため、ブロック境界に不連続が生じます。また、透過 (アルファチャンネル) をサポートしないため、背景透過が必要な画像には使用できません。
PNG の圧縮原理 - フィルタリングと Deflate
PNG は可逆圧縮フォーマットで、圧縮後も元の画像データを完全に復元できます。1996 年に GIF の特許問題を回避する目的で策定され、現在では Web 上の可逆圧縮画像の標準フォーマットとなっています。PNG の圧縮は 2 段階で構成されています。
フィルタリング: 各ピクセル行に対して 5 種類のフィルタ (None, Sub, Up, Average, Paeth) から最適なものを選択します。フィルタは隣接ピクセルとの差分を計算し、データの冗長性を高めます。例えば、青空のようにほぼ同じ色が続く領域では、Sub フィルタを適用すると差分がほぼゼロになるため圧縮効率が飛躍的に向上します。Paeth フィルタは左、上、左上の 3 ピクセルから予測値を計算する最も高度なフィルタで、グラデーションのある画像で効果を発揮します。
Deflate 圧縮: フィルタ適用後のデータに LZ77 アルゴリズムとハフマン符号化を組み合わせた Deflate 圧縮を適用します。LZ77 は過去に出現したバイト列の繰り返しを検出して「距離と長さ」の参照に置き換え、ハフマン符号化は出現頻度に応じた可変長符号で符号化します。スライディングウィンドウのサイズ (最大 32KB) が圧縮率に影響し、大きいほど遠くのパターンを参照できますが処理時間も増加します。
PNG はアルファチャンネル (透過) をサポートし、色数が少ない画像やエッジがシャープな画像で高い圧縮率を発揮します。一方、写真のような色の変化が複雑な画像では JPEG に比べてファイルサイズが 3-5 倍になることがあります。PNG-8 (256 色、パレットモード) と PNG-24/32 (フルカラー) の使い分けも重要で、アイコンやロゴには PNG-8 が適しています。PNG-8 でもアルファチャンネルを持てますが、256 色の制限内でのみ透過が表現されます。
WebP の圧縮技術 - VP8 ベースの次世代フォーマット
WebP は Google が 2010 年に開発したフォーマットで、非可逆・可逆の両方の圧縮モードを備えています。非可逆モードは VP8 動画コーデックの技術を静止画に応用したもので、JPEG と比較して 25-34% 小さいファイルサイズを実現します。Web パフォーマンスの改善を主目的として設計されたため、エンコード・デコードの速度と圧縮効率のバランスに優れています。
非可逆 WebP の特徴: JPEG と同様にブロックベースの予測符号化を使用しますが、4x4 ピクセル単位のイントラ予測により、ブロック境界のアーティファクトが軽減されます。予測モードは水平、垂直、DC (平均値)、TrueMotion の 4 種類があり、ブロックごとに最適なモードが選択されます。また、ブール算術符号化 (Boolean Arithmetic Coding) を採用しており、ハフマン符号化より高い圧縮効率を実現します。アルファチャンネルもサポートするため、透過付きの写真を 1 つのファイルで扱えます。
可逆 WebP の特徴: 空間予測、カラーキャッシュ、LZ77 バックリファレンス、ハフマン符号化を組み合わせた独自アルゴリズムで、PNG より 26% 程度小さいファイルを生成します。カラーキャッシュは最近使用された色を記憶し、同じ色の再出現を効率的に符号化します。また、パレット変換やグリーンチャンネルへの差分格納など、画像特有の冗長性を活用する複数の前処理が適用されます。
2024 年時点で主要ブラウザ (Chrome, Firefox, Safari, Edge) すべてが WebP をサポートしており、実用上の互換性問題はほぼ解消されています。ただし、画像編集ソフトの対応状況にはばらつきがあり、ワークフローによっては JPEG/PNG との併用が必要です。エンコード速度は JPEG と同程度で、AVIF よりも大幅に高速です。
圧縮品質とファイルサイズの関係 - 最適な品質設定の見つけ方
非可逆圧縮では、品質パラメータの設定がファイルサイズと画質のトレードオフを決定します。しかし、品質値とファイルサイズの関係は線形ではなく、画像の内容によっても大きく変動します。最適な品質設定を見つけるための実践的な知識を整理します。
JPEG の品質設定: 品質 100 から 95 に下げるとファイルサイズが 30-50% 削減されますが、視覚的な差はほぼ知覚できません。95 から 85 の範囲ではさらに 30-40% 削減され、注意深く比較しないと劣化が分からないレベルです。85 から 75 では明らかなサイズ削減が得られますが、グラデーション部分にバンディング (段差) が見え始めます。75 以下は品質劣化が顕著になるため、Web 用途では推奨されません。
WebP の品質設定: WebP の品質パラメータは JPEG と同じ 0-100 の範囲ですが、同じ数値でも JPEG より高い圧縮効率を発揮します。WebP 品質 75 は JPEG 品質 85 と同等の視覚品質を、より小さいファイルサイズで実現します。WebP 固有のパラメータとして method (0-6) があり、値が大きいほどエンコードに時間をかけて圧縮率を向上させます。
SSIM による客観的品質評価: 人間の知覚に近い画質指標として SSIM (Structural Similarity Index) が広く使われています。SSIM 0.95 以上であれば、ほとんどの人が劣化を知覚できないとされています。自動化パイプラインでは、目標 SSIM を設定して品質パラメータを自動調整する手法が有効です。cjpeg の -quality オプションや cwebp の -q オプションで品質を指定し、dssim コマンドで SSIM を計測して最適値を探索できます。
実務での使い分け - 用途別の最適フォーマット選択
フォーマット選択の判断基準を整理します。実務では画像の種類だけでなく、配信環境やワークフローも考慮する必要があります。
- 写真・自然画像: WebP (非可逆) を第一候補とし、フォールバックとして JPEG を用意します。品質 75-85 の範囲で、視覚的な劣化がほぼ知覚されないレベルを維持できます。AVIF 対応ブラウザ向けにはさらに 30-50% のサイズ削減が可能です。
- ロゴ・アイコン・図形: 色数が少なければ PNG-8、透過が必要でフルカラーなら WebP (可逆) または PNG-24 を使用します。SVG が使える場面では SVG を優先すべきです。SVG はベクター形式のため、どの解像度でもシャープに表示されます。
- スクリーンショット: テキストを含むスクリーンショットは PNG が最適です。JPEG ではテキスト周辺にモスキートノイズが発生し、可読性が低下します。ただし、ファイルサイズが大きくなる場合は WebP (可逆) への変換で 20-30% 削減できます。
- アニメーション: GIF の代替として WebP アニメーションが有効です。同等の品質で GIF の 1/3 程度のファイルサイズになります。短い動画であれば MP4 や WebM の方がさらに効率的です。
- レスポンシブ画像: HTML の
<picture>要素とsrcset属性を組み合わせ、デバイスの画面幅と対応フォーマットに応じて最適な画像を配信します。ビルドパイプラインで AVIF、WebP、JPEG の 3 フォーマットを自動生成する構成が理想的です。
最終的には、実際の画像で複数フォーマットを試し、ファイルサイズと品質のバランスを目視で確認することが最も確実です。自動化する場合は、画像の特性 (色数、エッジの多さ、透過の有無) に基づいてフォーマットを振り分けるロジックを組むとよいでしょう。Sharp や ImageMagick などのライブラリを使えば、ビルド時に複数フォーマットの自動生成が容易に実現できます。