Google は、ウェブページの読み込みを高速化するための方法を常に模索しています。ウェブ画像を小さくすることは、その 1 つの方法です。ほとんどのウェブページでは、画像がバイト数の最大 60%～ 65% を占め、ページサイズはレンダリング時間の合計の主要な要因です。ページサイズは、モバイル デバイスでは特に重要です。モバイル デバイスでは、画像を小さくすることで帯域幅とバッテリー駆動時間を節約できます。
WebP は Google が開発した新しい画像形式で、Chrome、Opera、Android でサポートされています。ウェブ上での画像の高速化とサイズ縮小を実現するように最適化されています。WebP 画像のサイズは、PNG や JPEG 画像と視覚的な品質が同等の場合、約 30% 小さくなります。また、WebP 画像形式は他の形式と同等の機能を備えています。サポートされているオプションは次のとおりです。
非可逆圧縮: 非可逆圧縮は VP8 キーフレーム エンコードに基づいています。VP8 は、VP6 形式と VP7 形式の後継として On2 Technologies によって作成された動画圧縮形式です。
ロスレス圧縮: ロスレス圧縮形式は WebP チームによって開発されました。
透明度: 8 ビットのアルファ チャンネルは、グラフィック画像に便利です。アルファ チャンネルは、ロスレス RGB とともに使用できます。この機能は現在、他の形式では使用できません。
アニメーション: フルカラーのアニメーション画像をサポートしています。
メタデータ: EXIF メタデータや XMP メタデータ（カメラで使用されるメタデータなど）が含まれる場合があります。
カラー プロファイル: ICC プロファイルが埋め込まれている場合があります。
画像の圧縮率が向上し、これらの機能がすべてサポートされているため、WebP は PNG、JPEG、GIF などのほとんどの画像形式に代わる優れた形式です。さらに、WebP では、透過性のある非可逆圧縮画像のサポートなど、新しい画像の最適化の機会が利用可能になることをご存じですか？はい、あります。WebP は、画像形式の万能ナイフです。
では、この魔法はどのように行われるのでしょう。では、実際にどのように動作しているか見てみましょう。
非可逆 WebP
WebP の非可逆圧縮では、（動画）フレームの予測に VP8 と同じ方法が使用されます。VP8 はブロック予測に基づいており、他のブロックベースのコーデックと同様に、フレームをマクロブロックと呼ばれる小さなセグメントに分割します。
各マクロブロック内で、エンコーダは以前に処理されたブロックに基づいて冗長な動きと色情報を予測できます。画像フレームは、各マクロブロックの近傍ですでにデコードされているピクセルのみを使用し、不明な部分を埋めようとするため、「キー」です。これは予測符号化と呼ばれます（VP8 動画のフレーム内符号化をご覧ください）。
冗長なデータはブロックから差し引かれるため、圧縮がより効率的になります。残るのは、圧縮形式で送信する残差と呼ばれる小さな差異のみです。
数学的に可逆な変換（有名な DCT、離散コサイン変換）を適用すると、残差には通常多くのゼロ値が含まれ、より効果的に圧縮できます。結果は量子化され、エントロピー コード化されます。面白いことに、量子化ステップは、ビットが非可逆的に破棄される唯一のステップです（下の図で QPj による除算を探してください）。他のすべてのステップは可逆で非破壊です。
次の図は、WebP の非可逆圧縮の手順を示しています。JPEG との差別化機能は赤色の円で囲まれています。
WebP はブロック量子化を使用し、さまざまな画像セグメントにビットを適応的に分散します。エントロピーが低いセグメントには少ないビットを、エントロピーが高いセグメントには多くのビットを割り当てます。WebP は算術エントロピー エンコードを使用しており、JPEG で使用されるハフマン エンコードよりも優れた圧縮を実現しています。
VP8 の内部予測モード
VP8 の内部予測モードは、次の 3 種類のマクロブロックで使用されます。
- 4x4 輝度
- 16x16 輝度
- 8x8 クロマ
これらのマクロブロックは、4 つの一般的な内部予測モードを共有します。
H_PRED（水平方向の予測）。ブロックの各列に、左側の列 L のコピーを入力します。
V_PRED（垂直予測）。ブロックの各行に、上の行 A のコピーを入力します。
DC_PRED（DC 予測）。A の上の行と L の左の列のピクセルの平均を使用して、ブロックを 1 つの値で塗りつぶします。
TM_PRED（TrueMotion 予測）。On2 Technologies によって開発された圧縮手法にちなんで命名されたモード。TM_PRED は、行 A と列 L に加えて、ブロックの上と左側のピクセル P を使用します。A のピクセル間の水平方向の差異（P から始まる）は、各行の開始に L のピクセルを使用して伝播されます。
次の図は、WebP の非可逆圧縮で使用されるさまざまな予測モードを示しています。
4x4 輝度ブロックの場合、V_PRED や H_PRED に似た 6 つのイントラモードが追加されていますが、これは異なる方向のピクセルの予測に対応しています。これらのモードの詳細については、VP8 ビットストリーム ガイドをご覧ください。
適応ブロック量子化
画像の品質を向上させるため、画像は視覚的に類似した特徴を持つ領域に分割されます。これらのセグメントごとに、圧縮パラメータ（量子化ステップ、フィルタリング強度など）が個別に調整されます。これにより、ビットを最も有用な場所に再分配することで、効率的な圧縮が実現されます。VP8 では最大 4 つのセグメントを使用できます（VP8 ビットストリームの制限）。
WebP（非可逆）が JPEG よりも優れている理由
予測符号化は、WebP が JPEG よりも優れている主な理由です。ブロック適応量子化も大きな違いを生みます。フィルタリングは、中程度または低いビットレートで効果的です。ブール演算エンコードは、ハフマン エンコードと比較して 5 ～ 10% の圧縮率向上をもたらします。
ロスレス WebP
WebP ロスレス エンコードは、いくつかの異なる手法を使用して画像を変換することをベースにしています。次に、変換パラメータと変換された画像データに対してエントロピー コーディングが実行されます。画像に適用される変換には、ピクセルの空間予測、色空間変換、ローカルで生成されるパレットの使用、複数のピクセルを 1 つのピクセルにパックする、アルファ置換などがあります。エントロピー コーディングには、距離値とコンパクトなスパース値の 2D エンコードを使用する LZ77-Huffman コーディングのバリエーションを使用します。
予測子（空間）変換
空間予測は、隣接するピクセルがしばしば相関するという事実を利用して、エントロピーを低減するために使用されます。予測変換では、すでにデコードされているピクセル（スキャンライン順）から現在のピクセル値が予測され、残差値（実際の値 - 予測値）のみがエンコードされます。予測モードによって、使用する予測のタイプが決まります。画像は複数の正方形の領域に分割され、1 つの正方形内のすべてのピクセルが同じ予測モードを使用します。
使用できる予測モードは 13 種類あります。主なものは、左、上、左上、右上のピクセルです。残りの 4 つは、左、上、左上、右上の組み合わせ（平均）です。
色（デ コリレーション）変換
カラー変換の目的は、各ピクセルの R、G、B 値の相関を解消することです。色変換では、緑（G）の値はそのままに、緑に基づいて赤（R）を変換し、緑と赤に基づいて青（B）を変換します。
予測変換の場合と同様に、まず画像がブロックに分割され、ブロック内のすべてのピクセルに同じ変換モードが使用されます。各ブロックには、green_to_red、green_to_blue、red_to_blue の 3 種類の色変換要素があります。
Subtract Green 変換
「緑色を減算する変換」では、各ピクセルの赤色と青色の値から緑色の値を減算します。この変換が存在する場合、デコーダは赤と青の両方に緑の値を追加する必要があります。これは、上記の一般的な色の相関解除変換の特殊なケースであり、カットオフを正当化するのに十分な頻度で発生します。
カラー インデックス（パレット）変換
一意のピクセル値がそれほど多くない場合は、カラー インデックス 配列を作成し、ピクセル値を配列のインデックスに置き換えた方が効率的です。色インデックス変換でこれを実現できます。カラー インデックス変換は、画像内の一意の ARGB 値の数を確認します。その数がしきい値（256）未満の場合、それらの ARGB 値の配列が作成され、ピクセル値が対応するインデックスに置き換えられます。
カラー キャッシュ コーディング
可逆 WebP 圧縮では、すでに見られた画像フラグメントを使用して新しいピクセルを再構築します。興味深い一致が見つからない場合、ローカル パレットを使用することもできます。このパレットは、最近使用した色を再利用するために継続的に更新されます。下の図は、スキャンが下方向に進むにつれて、最近使用された 32 色でローカル カラー キャッシュが段階的に更新される様子を示しています。
LZ77 後方参照
後方参照は、長さと距離コードのタプルです。長さは、スキャンライン順にコピーするピクセル数を示します。距離コードは、以前に検出されたピクセルの位置を示す数値で、このピクセルからピクセルがコピーされます。長さと距離の値は、LZ77 プレフィックス コーディングを使用して保存されます。
LZ77 接頭辞符号化では、大きな整数値を接頭辞コードと余分なビットの 2 つの部分に分割します。プレフィックス コードはエントロピー コードを使用して保存されますが、余分なビットはそのまま（エントロピー コードなしで）保存されます。
次の図は、（ピクセルではなく）単語マッチングを使用した LZ77（2D バリアント）を示しています。
アルファ付き非可逆 WebP
非可逆圧縮の WebP（RGB カラー）と可逆圧縮の WebP（アルファ付きの非可逆圧縮 RGB）に加えて、RGB チャンネルの非可逆圧縮とアルファ チャンネルの可逆圧縮を可能にする WebP モードもあります。このような可能性（非可逆 RGB と非可逆アルファ）は、現在、既存の画像形式では利用できません。現在、透明度が必要なウェブマスターは、画像を PNG で非可逆圧縮してエンコードする必要があります。これにより、サイズが大幅に増加します。WebP アルファは、ピクセルあたりのビット数が少ない画像をエンコードし、そのような画像のサイズを削減する効果的な方法を提供します。アルファ チャネルの可逆圧縮は、非可逆（品質 90）の WebP エンコードよりもわずか 22% バイト増加します。
全体として、透過 PNG を非可逆圧縮 + アルファ WebP に置き換えると、平均でサイズが 60 ～ 70% 削減されます。これは、アイコンが豊富なモバイルサイト（everything.me など）にとって魅力的な機能であることが確認されています。
