WebP Container の仕様

はじめに

WebP は、(i)VP8 キー フレーム エンコードを使用して画像データを非可逆的に圧縮するか、(ii)WebP 可逆エンコードを使用する画像形式です。これらのエンコード スキームは、JPEG、GIF、PNG などの古い形式よりも効率的です。ネットワークを介した高速な画像転送(ウェブサイトなど)に最適化されています。WebP 形式は、他の形式と同じ機能(カラープロファイル、メタデータ、アニメーションなど)を備えています。このドキュメントでは、WebP ファイルの構造について説明します。

WebP コンテナ(WebP の RIFF コンテナ)を使用すると、WebP の基本的なユースケース(VP8 キーフレームとしてエンコードされた単一の画像を含むファイル)を超える機能のサポートが可能になります。WebP コンテナは、以下に対する追加サポートを提供します。

  • ロスレス圧縮: WebP ロスレス形式を使用して、画像をロスレス圧縮できます。

  • メタデータ: 画像には、Exchangeable Image File Format(Exif)または Extensible Metadata Platform(XMP)形式のメタデータが保存されている場合があります。

  • 透明度: 画像に透明度(アルファ チャンネル)が設定されている場合があります。

  • カラー プロファイル: 画像には、International Color Consortium で説明されている ICC プロファイルが埋め込まれている場合があります。

  • アニメーション: 1 つの画像が複数のフレームで構成され、それらの間で一時停止することでアニメーションを作成できます。

命名

WebP コンテナを参照するときは、以下のタイプを使用することが推奨されます。

コンテナ形式名WebP
ファイル名の拡張子.webp
MIME タイプimage/webp
ユニフォーム タイプ IDorg.webmproject.webp

用語と基本

このドキュメントのキーワード「MUST」、「MUST NOT」、「REQUIRED」、「SHALL」、「SHALL NOT」、「SHOULD」、「SHOULD NOT」、「RECOMMENDED」、「NOT RECOMMENDED」、「MAY」、「OPTIONAL」は、ここで示すように、大文字でのみ表示される場合、BCP 14 RFC 2119 RFC 8174 に記載されているように解釈されます。

WebP ファイルには、静止画像(エンコードされたピクセル マトリックス)またはアニメーションのいずれかが含まれます。必要に応じて、透明度情報、カラー プロファイル、メタデータを含めることもできます。ピクセルの行列を画像のキャンバスと呼びます。

チャンク図のビット番号は、RFC 1166 に記載されているように、最上位ビット(「MSB 0」)が 0 から始まります。

このドキュメントで使用されるその他の用語は次のとおりです。

読み取り/書き込み
WebP ファイルを読み取るコードは「リーダー」と呼ばれ、書き込むコードは「ライター」と呼ばれます。
uint16
16 ビットのリトル エンディアン符号なし整数。
uint24
24 ビットのリトル エンディアンの符号なし整数。
uint32
32 ビットのリトル エンディアンの符号なし整数。
FourCC
4 文字コード(FourCC)は、4 つの ASCII 文字をリトルエンディアン順に連結して作成された uint32 です。つまり、「aaaa」(0x61616161)と「AAAA」(0x41414141)は異なる FourCCs として扱われます。
1 ベース
-1 でオフセットされた値を格納する符号なし整数フィールド。たとえば、このようなフィールドでは、値 2524 として格納されます。
ChunkHeader('ABCD')
個々のチャンクの FourCCチャンクサイズ ヘッダーの記述に使用されます。ここで、ABCD はチャンクの FourCC です。この要素のサイズは 8 バイトです。

RIFF ファイル形式

WebP ファイル形式は、RIFF(リソース交換ファイル形式)ドキュメント形式に基づいています。

RIFF ファイルの基本要素はチャンクです。構成は次のとおりです。

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                         Chunk FourCC                          |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                          Chunk Size                           |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
:                         Chunk Payload                         :
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
チャンク FourCC: 32 ビット
チャンクの識別に使用される 4 文字の ASCII コード。
チャンクサイズ: 32 ビット(uint32
チャンクのサイズ(バイト単位)。このフィールド、チャンク ID、パディングは含まれません。
チャンク ペイロード: Chunk Size バイト
データ ペイロード。[Chunk Size] が奇数の場合、1 つのパディング バイト(RIFF に準拠するには 0 でなければなりません)が追加されます。

: RIFF には、大文字のみのチャンク FourCC はすべての RIFF ファイル形式に適用される標準チャンクであり、ファイル形式に固有の FourCC はすべて小文字であるという規則があります。WebP はこの規則に従っていません。

WebP ファイル ヘッダー

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|      'R'      |      'I'      |      'F'      |      'F'      |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                           File Size                           |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|      'W'      |      'E'      |      'B'      |      'P'      |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
「RIFF」: 32 ビット
ASCII 文字「R」、「I」、「F」、「F」。
ファイルサイズ: 32 ビット(uint32
オフセット 8 から始まるファイルのサイズ(バイト単位)。このフィールドの最大値は 2^32 マイナス 10 バイトであるため、ファイル全体のサイズは最大で 4 GiB マイナス 2 バイトになります。
'WEBP': 32 ビット
ASCII 文字「W」、「E」、「B」、「P」。

WebP ファイルは、FourCC が「WEBP」の RIFF ヘッダーで始まる必要があります。ヘッダーのファイルサイズは、続くチャンクの合計サイズに「WEBP」FourCC の 4 バイトを加えたものです。ファイルには、ファイルサイズで指定されたデータの後にデータが含まれていてはなりません。リーダーは、末尾のデータは無視して、このようなファイルを解析する場合があります。チャンクのサイズは偶数であるため、RIFF ヘッダーで指定されるサイズも偶数になります。個々のチャンクの内容については、以降のセクションで説明します。

シンプルなファイル形式(非可逆)

このレイアウトは、画像に非可逆エンコードが必要で、拡張形式で提供される透明性などの高度な機能が不要な場合に使用する必要があります。このレイアウトのファイルはサイズが小さく、古いソフトウェアでサポートされています。

シンプルな WebP(非圧縮)ファイル形式:

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                                                               |
|                    WebP file header (12 bytes)                |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
:                        'VP8 ' Chunk                           :
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

「VP8」チャンク:

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                      ChunkHeader('VP8 ')                      |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
:                           VP8 data                            :
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
VP8 データ: Chunk Size バイト
VP8 ビットストリーム データ。

「VP8」FourCC の 4 番目の文字は ASCII スペース(0x20)です。

VP8 ビットストリーム形式の仕様については、VP8 Data Format and Decoding Guide をご覧ください。VP8 フレームヘッダーには、VP8 フレームの幅と高さが含まれています。これはキャンバスの幅と高さであると想定されます。

VP8 仕様では、画像を Y'CbCr 形式にデコードする方法について説明しています。RGB に変換するには、Recommendation BT.601 を使用すべきです。アプリケーションは別の変換方法を使用できますが、視覚的な結果はデコーダによって異なる場合があります。

シンプルなファイル形式(可逆)

: 古いリーダーでは、ロスレス形式のファイルがサポートされていない場合があります。

このレイアウトは、画像にロスレス エンコード(オプションの透明度チャンネルを使用)が必要で、拡張形式で提供される高度な機能が不要な場合に使用する必要があります。

シンプルな WebP(非圧縮)ファイル形式:

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                                                               |
|                    WebP file header (12 bytes)                |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
:                         'VP8L' Chunk                          :
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

「VP8L」チャンク:

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                      ChunkHeader('VP8L')                      |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
:                           VP8L data                           :
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
VP8L データ: Chunk Size バイト
VP8L ビットストリーム データ。

VP8L ビットストリームの現在の仕様については、WebP ロスレス ビットストリーム形式をご覧ください。VP8L ヘッダーには、VP8L 画像の幅と高さが含まれています。この値はキャンバスの幅と 高さとみなされます

拡張ファイル形式

: 古いリーダーでは、拡張形式を使用したファイルがサポートされていない場合があります。

拡張形式ファイルは次の要素で構成されています。

  • ファイルで使用されている機能に関する情報を含む「VP8X」チャンク。

  • 色プロファイルを含むオプションの「ICCP」チャンク。

  • アニメーション制御データを含むオプションの「ANIM」チャンク。

  • 画像データ。

  • Exif メタデータを含むオプションの「EXIF」チャンク。

  • XMP メタデータを含むオプションの「XMP」チャンク。

  • 不明なチャンクのリスト(省略可)。

静止画像の場合、画像データは次の要素で構成される単一のフレームで構成されます。

アニメーション画像の場合、画像データは複数のフレームから構成されます。フレームについて詳しくは、アニメーションのセクションをご覧ください。

再構成と色補正に必要なすべてのチャンク(VP8X、ICCP、ANIM、ANMF、ALPH、VP8、VP8L)は、前述の順序で表示する必要があります。再構成と色補正に必要なチャンクが順序どおりにない場合、リーダーは失敗する必要があります。

メタデータ不明なチャンクが順序どおりに表示されない場合があります。

理論的根拠: 読み手がすべてのデータを受信する前に画像のデコードを開始できるように、再構築に必要なチャンクをファイルの先頭に配置する必要があります。アプリケーションでは、実装に合わせてメタデータとカスタム チャンクの順序を変えるとメリットがあります。

拡張 WebP ファイル ヘッダー:

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                                                               |
|                   WebP file header (12 bytes)                 |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                      ChunkHeader('VP8X')                      |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|Rsv|I|L|E|X|A|R|                   Reserved                    |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|          Canvas Width Minus One               |             ...
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
...  Canvas Height Minus One    |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
予約済み(Rsv): 2 ビット
0 でなければなりません。読者はこのフィールドを無視する必要があります。
ICC プロファイル(I): 1 ビット
ファイルに「ICCP」チャンクが含まれているかどうかを設定します。
アルファ(L): 1 ビット
画像のフレームのいずれかに透明度情報(アルファ)が含まれているかどうかを設定します。
Exif メタデータ(E): 1 ビット
ファイルに Exif メタデータが含まれている場合に設定します。
XMP メタデータ(X): 1 ビット
ファイルに XMP メタデータが含まれているかどうかを設定します。
アニメーション(A): 1 ビット
アニメーション画像の場合は設定します。アニメーションを制御するには、「ANIM」と「ANMF」チャンクのデータを使用する必要があります。
予約済み(R): 1 ビット
0 でなければなりません。リーダーはこのフィールドを無視しなければなりません。
予約済み: 24 ビット
0 にする必要があります。読者はこのフィールドを無視する必要があります。
キャンバス幅 - 1: 24 ビット
キャンバスの幅(ピクセル単位)。1 を基準とする幅です。実際のキャンバスの幅は 1 + Canvas Width Minus One です。
キャンバスの高さ - 1: 24 ビット
キャンバスの高さ(ピクセル単位、1 から始まる数値)。実際のキャンバスの高さは 1 + Canvas Height Minus One です。

キャンバスの幅キャンバスの高さの積は、2^32 - 1 以下にする必要があります。

今後の仕様でフィールドが追加される可能性があります。不明なフィールドは無視する必要があります。

アニメーション

アニメーションは「ANIM」と「ANMF」チャンクによって制御されます。

'ANIM' チャンク:

アニメーション画像の場合、このチャンクにはアニメーションのグローバル パラメータが含まれます。

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                      ChunkHeader('ANIM')                      |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                       Background Color                        |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|          Loop Count           |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
背景色: 32 ビット(uint32
キャンバスのデフォルトの背景色(青、緑、赤、アルファのバイトの順序)。この色は、フレーム周辺のキャンバス上の未使用のスペースや、最初のフレームの透明なピクセルを塗りつぶすために使用できます。背景色は、Disposal メソッドが 1 の場合も使用されます。

:

  • 背景色には、「VP8X' Chunk」の Alpha フラグが設定されていない場合でも、不透明なアルファ値を含めても構いません。

  • ビューア アプリケーションは、背景色の値をヒントとして扱う必要がありますが、使用する必要はありません。

  • キャンバスは各ループの開始時に消去されます。そのために背景色を使用できます。

ループ数: 16 ビット(uint16
アニメーションをループする回数。0 の場合、無限大を意味します。

このチャンクは、「VP8X」チャンクで Animation フラグが設定されている場合に存在しなければなりません。アニメーション フラグが設定されておらず、このチャンクが存在する場合は、無視する必要があります。

「ANMF」チャンク:

アニメーション画像の場合、このチャンクには単一フレームに関する情報が含まれます。アニメーション フラグが設定されていない場合、このチャンクは存在すべきではありません。

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                      ChunkHeader('ANMF')                      |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                        Frame X                |             ...
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
...          Frame Y            |   Frame Width Minus One     ...
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
...             |           Frame Height Minus One              |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                 Frame Duration                |  Reserved |B|D|
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
:                         Frame Data                            :
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
フレーム X: 24 ビット(uint24
フレームの左上隅の X 座標は Frame X * 2 です。
フレーム Y: 24 ビット(uint24
フレームの左上隅の Y 座標は Frame Y * 2 です。
フレーム幅 - 1: 24 ビット(uint24
フレームの幅(1 ベース)。フレームの幅は 1 + Frame Width Minus One です。
フレーム高さ - 1: 24 ビット(uint24
フレームの 1 を基準とした高さ。フレームの高さは 1 + Frame Height Minus One です。
フレーム継続時間: 24 ビット(uint24
次のフレームを表示するまでの待機時間(1 ミリ秒単位)。フレーム時間 0(多くの場合 10 以下)の解釈は、実装によって定義されます。多くのツールとブラウザでは、GIF と同様の最小時間の長さが割り当てられます。
予約済み:6 ビット
0 でなければなりません。読者はこのフィールドを無視する必要があります。
ブレンド方法(B): 1 ビット

現在のフレームの透明なピクセルを、前のキャンバスの対応するピクセルとどのようにブレンドするかを示します。

  • 0: アルファ ブレンドを使用します。前のフレームを破棄した後、アルファ ブレンドを使用して現在のフレームをキャンバスにレンダリングします(以下を参照)。現在のフレームにアルファ チャンネルがない場合は、アルファ値が 255 であると想定し、長方形を効果的に置き換えます。

  • 1: ブレンドしない。前のフレームを破棄したら、現在のフレームで覆われている長方形を上書きして、現在のフレームをキャンバスにレンダリングします。

廃棄方法(D): 1 ビット

キャンバスに表示された後(次のフレームをレンダリングする前)に現在のフレームをどのように処理するかを示します。

  • 0: 廃棄しないでください。キャンバスはそのままにします。

  • 1: 背景色に廃棄します。現在のフレームで覆われているキャンバス上の長方形を、「ANIM」チャンクで指定された背景色で塗りつぶします。

:

  • フレームの破棄は、フレーム長方形フレーム Xフレーム Yフレーム幅フレーム高さで定義された長方形)にのみ適用されます。キャンバス全体を覆う場合もあれば、覆わない場合もあります。

  • アルファ ブレンド:

    R、G、B、A の各チャンネルが 8 ビットであり、RGB チャンネルがアルファでプリマルチプライされていない場合、「dst」を「src」にブレンドする式は次のとおりです。

    blend.A = src.A + dst.A * (1 - src.A / 255)
    if blend.A = 0 then
      blend.RGB = 0
    else
      blend.RGB =
          (src.RGB * src.A +
           dst.RGB * dst.A * (1 - src.A / 255)) / blend.A
    
  • アルファ ブレンドは、画像のカラー プロファイルを考慮して、リニア色空間で行う必要があります。カラー プロファイルが存在しない場合、標準 RGB(sRGB)が想定されます。(なお、sRGB はガンマが 2.2 程度であるため、リニア化する必要があります)。

フレームデータ: チャンクサイズ バイト - 16

構成:

: 「ANMF」ペイロードのフレームデータは、RIFF ファイル形式で説明されているように、個々のパディングされたチャンクで構成されています。

アルファ版

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                      ChunkHeader('ALPH')                      |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|Rsv| P | F | C |     Alpha Bitstream...                        |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
予約済み(Rsv): 2 ビット
0 にする必要があります。読者はこのフィールドを無視する必要があります。
前処理(P): 2 ビット

これらの情報量のあるビットは、圧縮中に行われた前処理を通知するために使用されます。デコーダは、この情報を使用して、表示前に値をディザリングしたり、グラデーションをスムーズにしたりできます。

  • 0: 前処理なし。
  • 1: レベルの低下。

デコーダは、この情報を特定の方法で使用する必要はありません。

フィルタリング方法(F): 2 ビット

使用されるフィルタリング メソッドは次のとおりです。

  • 0: なし。
  • 1: 水平フィルタ。
  • 2: 垂直フィルタ。
  • 3: グラデーション フィルタ。

各ピクセルに対して、以下の計算によってフィルタリングが実行されます。現在の X の位置を囲むアルファ値が次のようにラベル付けされているとします。

 C | B |
---+---+
 A | X |

位置 X のアルファ値を計算します。まず、フィルタリング方法に応じて予測が行われます。

  • メソッド 0: 予測器 = 0
  • メソッド 1: 予測子 = A
  • メソッド 2: 予測子 = B
  • メソッド 3: predictor = clip(A + B - C)

ここで、clip(v) は次のようになります。

  • 0(v < 0 の場合)
  • v > 255 の場合: 255
  • それ以外の場合は

最終的な値は、圧縮解除された値 X を予測器に加算し、[256..511] の範囲を [0..255] の範囲にラップすることで、モジュロ 256 演算で導出されます。

alpha = (predictor + X) % 256

左端と上端のピクセル位置には特殊なケースがあります。たとえば、位置(0, 0)の左上の値は、予測値として 0 を使用します。それ以外の場合は以下のとおりです。

  • 水平フィルタリング メソッドまたはグラデーション フィルタリング メソッドの場合、座標(0, y)の左端のピクセルは、すぐ上の座標(0, y-1)を使用して予測されます。
  • 垂直フィルタリングまたはグラデーション フィルタリングの方法では、位置(x, 0)の最上位ピクセルは、左側の位置(x-1, 0)を使用して予測されます。
圧縮方法(C): 2 ビット

使用された圧縮方法:

  • 0: 圧縮なし。
  • 1: WebP ロスレス形式で圧縮されています。
アルファ ビットストリーム: チャンクサイズ バイト - 1

エンコードされたアルファビットストリーム。

このオプションのチャンクには、このフレームのエンコードされたアルファデータが含まれています。「VP8L」チャンクを含むフレームには、このチャンクを含めないでください。

理由: 透明性情報はすでに「VP8L」チャンクに含まれています。

アルファ チャンネル データは、圧縮方法が「0」の場合は非圧縮の元データとして、圧縮方法が「1」の場合はロスレス形式を使用して圧縮されて保存されます。

  • 未加工データ: 長さが幅 * 高さのバイト シーケンスで、8 ビットの透明度値がすべてスキャン順に含まれています。

  • 可逆形式の圧縮: バイト シーケンスは、幅 x 高さが暗黙的に指定された圧縮画像ストリームです(WebP 可逆ビットストリーム形式を参照)。つまり、この画像ストリームには画像のサイズを表すヘッダーが含まれていません。

    理由: ディメンションは他のソースからすでにわかっているため、再度保存すると冗長になり、エラーが発生しやすくなります。

    画像ストリームがアルファ、赤、緑、青(ARGB)の色値にデコードされたら、ロスレス形式仕様で説明されているプロセスに沿って、ARGB 四重体のチャンネルから透明度情報を抽出する必要があります。

    根拠: 緑色のチャンネルは、他のチャンネルとは異なり、仕様で追加の変換ステップが許可されているため、圧縮を改善できます。

ビットストリーム(VP8/VP8L)

このチャンクには、1 つのフレームの圧縮ビットストリーム データが含まれています。

ビットストリーム チャンクは、(i)FourCC として「VP8」(重要な 4 文字目のスペースに注意)を使用する「VP8」チャンク、または(ii)FourCC として「VP8L」を使用する「VP8L」チャンクのいずれかです。

「VP8」チャンクと「VP8L」チャンクの形式は、それぞれシンプル ファイル形式(非可逆圧縮)シンプル ファイル形式(可逆圧縮)のセクションで説明されています。

カラー プロファイル

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                      ChunkHeader('ICCP')                      |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
:                       Color Profile                           :
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
カラー プロファイル: チャンクサイズ(バイト)
ICC プロファイル。

このチャンクは画像データの前に表示する必要があります。

このようなチャンクは最大で 1 つ存在すべきです。このようなチャンクが複数ある場合、リーダーは最初のチャンク以外をすべて無視できます。詳しくは、ICC 仕様をご覧ください。

このチャンクが存在しない場合、sRGB とみなされる必要があります。

メタデータ

メタデータは「EXIF」チャンクまたは「XMP」チャンクに保存できます。

各タイプ(EXIF と XMP)のチャンクは 1 つまででなければなりません。このようなチャンクが複数ある場合、リーダーは最初のチャンク以外をすべて無視できます。

チャンクは次のように定義されます。

「EXIF」チャンク:

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                      ChunkHeader('EXIF')                      |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
:                        Exif Metadata                          :
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Exif メタデータ: チャンクサイズ(バイト)
Exif 形式の画像メタデータ。

「XMP」チャンク:

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                      ChunkHeader('XMP ')                      |
|                                                               |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
:                        XMP Metadata                           :
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
XMP メタデータ: チャンクサイズ(バイト)
XMP 形式の画像メタデータ。

「XMP」の FourCC の 4 番目の文字は ASCII スペース(0x20)です。

メタデータの処理に関するその他のガイダンスについては、メタデータ ワーキング グループの「メタデータの処理に関するガイドライン」をご覧ください。

不明なチャンク

FourCC がこのドキュメントで説明されているどのチャンクとも異なる RIFF チャンク(RIFF ファイル形式のセクションに記載)は、不明なチャンクとみなされます。

理由: 不明なチャンクを許可すると、将来の形式の拡張が可能になり、アプリケーション固有のデータを保存することもできます。

ファイルに不明なチャンクが含まれている場合があります。

リーダーはこれらのチャンクを無視する必要があります。書き込み側は、これらのチャンクを元の順序で保持する必要があります(これらのチャンクを変更する明確な意図がない限り)。

フレームからのキャンバス アセンブリ

ここでは、アニメーション画像の場合に、読者がキャンバスをどのように組み立てなければならないかについて概説します。

このプロセスは、VP8X チャンクで指定されたサイズ(幅 Canvas Width Minus One + 1 ピクセル、高さ Canvas Height Minus One + 1 ピクセル)を使用してキャンバスを作成することから始まります。「ANIM」チャンクの Loop Count フィールドは、アニメーション プロセスを繰り返す回数を制御します。これは、Loop Count 値がゼロでない場合の Loop Count - 1 または、Loop Count がゼロの場合の無限大です。

各ループの反復処理の開始時に、キャンバスは「ANIM」チャンクの背景色またはアプリケーション定義の色で塗りつぶされます。

「ANMF」チャンクには、表示順序で指定された個々のフレームが含まれます。各フレームをレンダリングする前に、前のフレームの Disposal method が適用されます。

デコードされたフレームのレンダリングは、キャンバスの左上隅を原点として使用し、デカルト座標(2 * Frame X2 * Frame Y)で開始されます。幅 Frame Width Minus One + 1 ピクセル、高さ Frame Height Minus One + 1 ピクセルは、Blending method を使用してキャンバスにレンダリングされます。

キャンバスは Frame Duration ミリ秒間表示されます。これは、「ANMF」チャンクによって指定されたすべてのフレームが表示されるまで続きます。その後、新しいループの反復処理が開始されます。すべての反復処理が完了した場合は、キャンバスは最終状態のままになります。

次の擬似コードは、レンダリング プロセスを示しています。VP8X.field という表記は、同じ説明を持つ「VP8X」チャンクのフィールドを意味します。

VP8X.flags.hasAnimation MUST be TRUE
canvas ← new image of size VP8X.canvasWidth x VP8X.canvasHeight with
         background color ANIM.background_color or
         application-defined color.
loop_count ← ANIM.loopCount
dispose_method ← Dispose to background color
if loop_count == 0:
  loop_count = ∞
frame_params ← nil
next chunk in image_data is ANMF MUST be TRUE
for loop = 0..loop_count - 1
  clear canvas to ANIM.background_color or application-defined color
  until eof or non-ANMF chunk
    frame_params.frameX = Frame X
    frame_params.frameY = Frame Y
    frame_params.frameWidth = Frame Width Minus One + 1
    frame_params.frameHeight = Frame Height Minus One + 1
    frame_params.frameDuration = Frame Duration
    frame_right = frame_params.frameX + frame_params.frameWidth
    frame_bottom = frame_params.frameY + frame_params.frameHeight
    VP8X.canvasWidth >= frame_right MUST be TRUE
    VP8X.canvasHeight >= frame_bottom MUST be TRUE
    for subchunk in 'Frame Data':
      if subchunk.tag == "ALPH":
        alpha subchunks not found in 'Frame Data' earlier MUST be
          TRUE
        frame_params.alpha = alpha_data
      else if subchunk.tag == "VP8 " OR subchunk.tag == "VP8L":
        bitstream subchunks not found in 'Frame Data' earlier MUST
          be TRUE
        frame_params.bitstream = bitstream_data
    apply dispose_method.
    render frame with frame_params.alpha and frame_params.bitstream
      on canvas with top-left corner at (frame_params.frameX,
      frame_params.frameY), using Blending method
      frame_params.blendingMethod.
    canvas contains the decoded image.
    Show the contents of the canvas for
    frame_params.frameDuration * 1 ms.
    dispose_method = frame_params.disposeMethod

ファイル レイアウトの例

アルファ付きで非可逆エンコードされた画像は次のようになります。

RIFF/WEBP
+- VP8X (descriptions of features used)
+- ALPH (alpha bitstream)
+- VP8 (bitstream)

ロスレスでエンコードされた画像は次のようになります。

RIFF/WEBP
+- VP8X (descriptions of features used)
+- VP8L (lossless bitstream)
+- XYZW (unknown chunk)

ICC プロファイルと XMP メタデータを含むロスレス画像は次のようになります。

RIFF/WEBP
+- VP8X (descriptions of features used)
+- ICCP (color profile)
+- VP8L (lossless bitstream)
+- XMP  (metadata)

EXIF メタデータを含むアニメーション画像は次のようになります。

RIFF/WEBP
+- VP8X (descriptions of features used)
+- ANIM (global animation parameters)
+- ANMF (frame1 parameters + data)
+- ANMF (frame2 parameters + data)
+- ANMF (frame3 parameters + data)
+- ANMF (frame4 parameters + data)
+- EXIF (metadata)