Webサイトの表示速度改善やCore Web Vitals向上において、いまや標準の画像フォーマットとなった「WebP（ウェッピー）」。
PNGと比較して可逆圧縮で約26%軽量化でき、JPEGと比較しても非可逆圧縮で約25〜34%小さくなると言われています。
本記事では、「なぜWebPは高画質のまま劇的なファイルサイズ削減が可能なのか？」という疑問に対し、RIFFコンテナの構造から可逆・非可逆圧縮のアルゴリズム、ハフマン符号化を効かせるための4つの前処理フィルタまで、内部のメカニズムを分かりやすく解説します。
WebPの基本構造とコンテナ形式
WebPはGoogleが開発したオープンソースの静止画像フォーマットです。画質を劣化させずにサイズを抑える「可逆圧縮（Lossless）」と、人間の知覚に合わせて不要な情報を間引く「非可逆圧縮（Lossy）」の双方向モードをサポートしています。
WebPファイルの内部フォーマットは、汎用的なメディアフォーマット規格である「RIFF（Resource Interchange File Format）」コンテナを採用しています。
RIFFコンテナとチャンク構造の特徴
- FourCC（4文字の識別ID）とサイズ管理：データは「チャンク（Chunk）」と呼ばれるブロックの集合体で構成されます。先頭には必ずフォーマット識別用の4文字IDとデータサイズが記録されます。
- デコーダーの分岐処理：ヘッダー直後に続くFourCC識別子によって、デコーダーは適用する復号パイプラインを即座に判定します。
WebPにおける代表的なチャンク識別子は次の通りです。
| FourCC ID | 圧縮方式 | 特徴・用途 |
|---|---|---|
VP8 |
非可逆圧縮（Lossy） | 写真や複雑なグラデーションに適したロッシー圧縮モード |
VP8L |
可逆圧縮（Lossless） | イラスト、アイコン、UI部品など劣化を許さないロスレス圧縮モード |
VP8X |
拡張仕様（Extended） | 透過（Alphaチャンネル）、アニメーション、メタデータ（EXIF/XMP/ICCP）を含む拡張ヘッダー |
WebPデコーダーは、このFourCC IDを読み取ることで「非可逆（VP8）」か「可逆（VP8L）」かを瞬時に識別し、それぞれ最適な展開処理へと進みます。
WebP可逆圧縮（Lossless）の仕組み
WebPの可逆圧縮（VP8L）は、元の画像ピクセルを1ビットの狂いもなく完全復元するモードです。PNGと同一の役割を果たしますが、独自の変換パイプラインによってPNGを大きく上回る圧縮効率を叩き出します。
エントロピー符号化の主役「ハフマン符号化」
可逆圧縮の最終工程で必須となるのが「ハフマン符号化（Huffman Coding）」です。
データ圧縮の本質は、「データの偏り（出現頻度の偏り）を利用して、頻出するデータには短いビット長を、出現頻度の低いデータには長いビット長を割り当てる」ことにあります。
ハフマン符号化のプロセス
例えば、全50ビットの情報がある場合、頻度順にツリー（木構造）を構築し、左右の枝に0と1のビットを割り当てることで、全体のデータ量を25ビット前後に半減させることが可能になります。
さらにWebPでは、ツリー全体の構造をそのまま送るのではなく「符号長の列」のみを記録して送信します。この符号長列自体に「0」が多く連続するため、ランレングス圧縮等と組み合わせることで極限まで情報量を圧縮します。
ハフマン符号化の効果を最大化する4つの前処理フィルタ
ハフマン符号化は「値の偏り」が大きければ大きいほど強力に機能します。しかし、一般的な画像ピクセルはRGB各値が散らばっており、そのままでは十分な偏りが得られません。
そこでWebP可逆圧縮では、ハフマン符号化を行う前に4つの前処理（空間・色変換フィルタ）を実行し、データを徹底的に「0周辺」や「特定のパターン」へと集中させます。
-
緑成分の減算（Subtract Green Transform）
人間の視覚において最も輝度情報に寄与する「G（緑）」成分を、R（赤）およびB（青）から差し引く変換（R' = R - G,B' = B - G）を行います。RGB各色の高い相関関係が相殺され、差分値が「0」の周辺に高密度で集中します。 -
空間予測フィルタ（Spatial Predictor Transform）
すでに復号済みの周囲ピクセル（左、上、左上など）から、現在のピクセル色を予測アルゴリズムによって推測します。画像データとして記録するのは元の色ではなく「予測値と実測値の差分（残差）」のみです。平坦部やグラデーション部分では差分値のほとんどが0になり、データ量が激減します。 -
カラーキャッシュ（Color Indexing / Cache Transform）
直近に出現した色（最大2048色など）を一時的なキャッシュテーブル（パレット）として保持します。同じ色が再度登場した際は、RGBの値（24ビット）を記録する代わりに、短い「キャッシュ番号（インデックス）」だけを記録します。 -
2D空間マッチング（2D / LZ77-like Distance & Length）
画像内で以前に出現したピクセルパターンと一致する領域が見つかった場合、そのピクセル群を「過去のどの位置から（距離：Distance）」「何ピクセル分繰り返すか（長さ：Length）」という2つの数値だけで参照・表現します。
これらの高度な変換を何層も重ねた上で、最終的にハフマン符号化を適用するため、PNGを凌駕する高い可逆圧縮率が実現されます。
WebP非可逆圧縮（Lossy）の仕組み
一方、写真やWebサイトの背景画像などで多用される「非可逆圧縮（VP8）」は、Googleが買収・オープンソース化した動画コーデック「VP8」のイントラフレーム（キーフレーム）技術を静止画に転用したものです。
非可逆圧縮（VP8）の処理ステップ
- マクロブロック分割と空間予測：画像を16×16ピクセルや4×4ピクセルのブロック単位に分割し、隣接するブロックの境界線から現在のブロックの内容を予測します。
- 差分抽出と周波数変換（DCT変換）：実際の画像と予測画像との「差分」を取り出し、離散コサイン変換（DCT）類似の変換を行って周波数成分に分解します。
- 知覚的量子化（高周波成分の削減）：人間の目が変化を感じ取りにくい高周波成分（細かいノイズや微細テクスチャ）を間引き・量子化します。
- セグメンテーション（領域別最適化）：画像を特徴ごとに複数の領域（セグメント）に分け、背景のような滑らかな部分と、輪郭のようなシャープな部分で圧縮の強弱を個別に調整します。
最後にブール演算エントロピー符号化によってデータ全体をパッケージングします。JPEGではブロックごとのモスキートノイズやブロックノイズが目立ちやすいのに対し、WebPは高度なブロック境界フィルタと領域別制御によって、同じ容量でもよりクリアな画質を維持できます。
WebP採用によるパフォーマンス向上
WebPをサイト全体に適用することで、以下のような大きな実用的メリットが得られます。
| メリット項目 | 具体的な効果 |
|---|---|
| ページ表示速度（LCP）の向上 | 画像転送量が30%前後削減され、Largest Contentful Paint（最大コンテンツ描画）スコアが大幅に改善されます。 |
| 透過＋高圧縮の両立 | これまでファイルサイズが肥大化しがちだった透過PNG素材を、品質を落とさず大幅に軽量化できます。 |
| サーバー負荷と通信コスト削減 | CDNやホスティングサーバーの帯域幅消費を抑制し、モバイルユーザーの通信環境にも優しい設計となります。 |
まとめ
WebPが既存のPNGやJPEGに比べて大幅にファイルサイズを小さくできる理由は、「徹底した前処理によってデータの偏りを作り出し、高効率なエントロピー符号化で極限まで圧縮する」という計算し尽くされたアルゴリズムの積み重ねにあります。
現代の主要ブラウザ（Chrome, Safari, Edge, Firefox等）はすべてWebPに完全対応しています。サイトの高速化やSEO対策を検討する際は、ぜひ画像のWebP化を標準ワークフローとして取り入れてみてください。
