Google は、ウェブページの読み込みを高速化する方法を常に検討しています。そのための 1 つの方法は、ウェブ画像を小さくすることです。画像はほとんどのウェブページで最大 60%～ 65% のバイトを占めており、ページサイズは合計レンダリング時間の主な要因です。ページサイズは特にモバイル デバイスで重要です。モバイル デバイスでは、画像が小さくなれば、帯域幅とバッテリー寿命の両方が節約されます。
WebP は Google が開発した新しい画像形式で、Chrome、Opera、Android でサポートされています。Web 上でより高速で小さな画像を表示できるよう最適化されています。WebP 画像は、同等の画質の PNG および JPEG 画像と比較して、サイズが約 30% 小さくなります。また、WebP 画像形式には他の形式と同等の機能があります。サポート対象:
非可逆圧縮: 非可逆圧縮は VP8 キーフレーム エンコードに基づきます。VP8 は、On2 Technologies が VP6 形式と VP7 形式の後継として開発した動画圧縮形式です。
可逆圧縮: 可逆圧縮形式は 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 の左側にある列のピクセルの平均値を使用して、ブロックを単一の値で埋めます。
TM_PRED（TrueMotion Prediction）。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 ハフマン コーディングのバリエーションを使用します。
予測子（空間）変換
空間予測は、隣接するピクセルに相関関係があることが多いという事実を利用して、エントロピーを低減するために使用されます。予測器変換では、現在のピクセル値がデコード済みのピクセルから（スキャンライン順に）予測され、残差値（実際 - 予測）のみがエンコードされます。予測モードにより、使用する予測のタイプが決まります。画像は複数の正方形の領域に分割され、1 つの正方形内のすべてのピクセルは同じ予測モードを使用します。
予測モードは 13 種類あります。よく見られるピクセルは、左、上、左上、右上のピクセルです。残りは、左、上、左上、右上の組み合わせ（平均）です。
色（逆相関）変換
色変換の目的は、各ピクセルの R、G、B の値をデコレートすることです。色変換は、緑色（G）値をそのまま保持し、緑色に基づいて赤色（R）を変換し、緑色に基づいて青色（B）を変換してから赤色に基づいて変換します。
予測子変換の場合と同様に、まず画像をブロックに分割し、ブロック内のすべてのピクセルに同じ変換モードを使用します。各ブロックには、green_to_red、green_to_blue、red_to_blue の 3 種類の色変換要素があります。
減算緑変換
「緑の減算変換」は、各ピクセルの赤と青の値から緑の値を減算します。この変換が存在する場合、デコーダは緑の値を赤と青の両方に追加する必要があります。これは上記の一般的な色非相関変換の特殊なケースであり、カットオフを保証できる程度の頻度で行われます。
カラー インデックス処理（パレット）変換
一意のピクセル値の数が少ない場合は、カラー インデックス配列を作成し、ピクセル値を配列のインデックスに置き換えると効率的です。カラー インデックス変換はこれを実現します。カラー インデックス変換は、画像内の一意の 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 など）にとって優れた機能として確認されています。
