WebP画像フォーマット処理と互換利用

WebP画像フォーマット処理と互換利用

WebP 画像を長い間使用してきましたが、プロジェクト中にまだ WebP 画像について十分に理解していないことに最近気づきました。そこで、WebP 関連のナレッジ ポイントをこの記事にまとめて記録しました。
(github: https://github.com/MichealWayne、個人ブログアドレス: https://blog.michealwayne.cn/ )

導入

WebP は、Web 上の画像に優れた可逆圧縮および非可逆圧縮を提供する最新の画像形式です。WebP を使用すると、Web マスターと Web 開発者は、Web を高速化する、より小さくてリッチな画像を作成できます。

2010 年に Google によってリリースされた WebP は、Web 上の画像に優れた可逆圧縮および非可逆圧縮を提供する最新の画像形式です。WebP を使用すると、Web マスターと Web 開発者は、より小型でリッチな画像を作成し、Web を高速化できます。

PNG と比較して、WebP ロスレス画像のサイズは 26% 小さくなります。同じ SSIM (構造類似性指数、構造的類似性) 品質指数の下では、WebP 非可逆画像は類似の JPEG 画像より 25 ～ 34% 小さくなります。

ロスレス WebP は、バイト数のわずか 22% の増加で透明性 (アルファ チャネルとも呼ばれます) をサポートします。非可逆 RGB 圧縮が許容される状況では、非可逆 WebP は透明度もサポートしており、通常、ファイル サイズは PNG と比較して 3 倍小さくなります。

さらに、Google は 2014 年に動的 WebP を提案し、WebP を拡張してアニメーション グラフィックス機能をサポートしました。ダイナミック WebP は、GIF よりも豊富な色をサポートし、占有スペースが少なく、モバイル ネットワーク アニメーションの再生により適しています。

PNGとの比較

libpngの場合、非可逆 WebP は最高の品質 (変換) を備えているだけでなく、ZopfliPNG の PNG 圧縮密度 (下記の表 1) を備えており、そのエンコード (下記の表 2) およびデコード (下記の表 3) の速度は ZopfliPNG とほぼ同等です。 PNGの。

ロスレス WebP、透明性のある非可逆 WebP と PNG

[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムが備わっている可能性があります。画像を保存して直接アップロードすることをお勧めします。

インターネットからの 1,000 個の PNG が圧縮され、対応する可逆 WebP および非可逆透過 WebP と比較されます。2 種類の WebP 圧縮を適用すると、ほとんどの画像が PNG より小さくなることがわかります。

ロスレス WebP のエンコード時間は PNG の 5 倍以上と長くなりますが、デコード速度は PNG と同等であり、多くの場合 PNG よりも高速です。WebP は、エンコード時に PNG よりも 25% 多くのメモリを消費し、デコード時に PNG よりも 30% 少ないメモリを消費します。

動的WebPとAPNGの比較

APNG は PNG ベースのエンコードで、変化領域をエンコードする WebP と同様の動画のエンコード方式です。単一の WebP は理論的には PNG より小さいですが、一部の WebP はアニメーション グラフィックスに統合されると APNG より大きくなります。

詳細については、専用の比較デモを参照してください: http://littlesvr.ca/apng/gif_apng_webp1.html

JPEGとの比較

以下の表は、JPEG 品質パラメーター Q の 3 つの異なる値 (50、75、および 95) の実験結果を示しています。品質パラメータ 50 と 95 は、それぞれ低ビットレートと高ビットレートでの画像圧縮を表します。JPEG 品質パラメータ 75 も含めました。これは、一般的に JPEG 画像に推奨される品質レベルであるためです。

GIFとの比較

WebP の利点:

• WebP は 24 ビット RGB および 8 ビット透明度チャネルをサポートしますが、GIF は 8 ビット カラーと 1 ビット透明度のみをサポートします。
• WebP は可逆モードと非可逆モードの両方をサポートしており、動的グラフィックスの場合、非可逆画像と可逆画像を同時に結合できます。GIF は可逆圧縮のみをサポートします。WebP の非可逆圧縮テクノロジは、現実世界のビデオから作成されたアニメーション グラフィックスにもよく適応します。
• WebP は GIF よりも占有するスペースが少なくなります。アニメーション GIF は、非可逆 WebP に変換すると 64%、可逆 WebP に変換すると 19% 削減されます。これはモバイル ネットワークにとって非常に重要です。
• WebP ではデコード時間が短縮され、WebP で使用されるデコード時間は GIF の 57% です。

短所:

• 実際、環境のサポートだけでは十分ではなく、ブラウザに WebP サポートを追加するには、さらにコードを追加する必要があります。

詳細については、専用の比較デモを参照してください: https://isparta.github.io/compare-webp/index_a.html#12

ツールと使用法

変換ツール

画像マイグク

imageMaigck は、サーバーおよびクライアント上で実行できる一般的な画像処理ツールであり、nodejs の gm パッケージを使用していくつかのスクリプト サービスを実装できます。基本的な使い方は以前まとめた記事「ImageMagick と gm」に記載されています。

クウェブ、ドウェブ

cwebp/dwebp は、Google が公式に提供する WebP 変換ツールです。公式ツールでは、Windows/linux/mac の 3 つのシステム バージョンが提供されています。その紹介とインストールについては、「cwebp、dwebp、および WebP ライブラリの入手」を参照してください。cwebp は JPEG、PNG、または TIFF を WebP にエンコードできます。

のように

cwebp [options] -q quality input.png -o output.webp

オプションはオプションです。

• loss (非可逆圧縮、デフォルト)

• ロスレス（可逆圧縮）

• q : 品質指標（圧縮率）、非可逆圧縮は有効、可逆圧縮は無視されます。

• o : イメージ名の形式を入力します

• cwebp [オプション] 入力ファイル -o 出力ファイル.webp

その他のオプション：

• -- string: 入力ファイルを明示的に指定します。このオプションは、入力ファイルが「-」で始まる場合に便利です。このオプションは最後に表示する必要があります。これ以降の他のオプションは無視されます
• -h、-help: 簡単な使用説明書
• -H、-longhelp: 詳しい使用方法
• -version： バージョンナンバー
• -lossless: 画像をロスレスエンコード
• -q {float}: 圧縮率を指定します。範囲は 0 ～ 100、デフォルトは 75 です。
• -z {int}: 可逆圧縮モードを 0 ～ 9 の間で切り替えます。レベル 0 が最も速く、レベル 9 が最も遅くなります。高速モードでは、低速ファイルよりも大きなファイル サイズが生成されます。デフォルトは 6 です。後で -q または -m を使用した場合、-z は効果がありません。
• -alpha_q {int}: アルファ圧縮係数を 0 ～ 100 の間で指定します (デフォルトは 100)。
• -preset {string}: デフォルトのパラメータセットを指定します
• -m {int}：圧縮方式を0～6で指定します。デフォルト値は 4 です。
• -resize {width} {height}: 幅と高さを指定します
• -crop {x_position} {y_position} {width} {height}: [x 位置、y 位置、幅、高さ] 領域の画像をトリミングします。トリミングされる領域のサイズはソース画像のサイズ以内である必要があります。
• -mt: 可能であればマルチスレッドエンコーディングを使用してください
• -low_memory: 非可逆エンコーディングのメモリ使用量を削減します。
• -size {int}: 指定されたターゲット サイズ (バイト単位) は実際の結果のサイズではありません。エンコード方法を選択することで、実際の結果は可能な限りこのターゲットに近づきます。-size と -psnr を同時に指定した場合、-psnr は無効になります。
• -psnr {float}: 指定されたターゲットの PSNR (dB 単位) は実際の結果のサイズではありません。実際の結果は、エンコード方式を選択することによって、このターゲットに可能な限り近くなります。-size と -psnr を同時に指定した場合、-psnr は無効になります。
• -pass {int}: パスの最大数を設定します。範囲は 1 ～ 10、デフォルトは 1 です。-size または -psnr が使用され、-pass が使用されない場合、デフォルトの -pass は 6 です。
• -af: 自動フィルタリング。アルゴリズムは、バランスの取れた品質を達成するために、フィルタリング強度の最適化に余分な時間を費やします。
• -jpeg_like: 内部パラメータのマッピングを変更して、JPEG 圧縮の予想されるサイズとよりよく一致するようにします。このフラグは通常、対応する JPEG (同じ -q 設定で使用) と同等の出力ファイルを生成しますが、視覚的な歪みは少なくなります。
• -f {int}: フィルターの強度を 0 (フィルターなし) から 100 (最大フィルター) の範囲で指定します。値が高いほど、画像は滑らかになります。通常の値は 20 ～ 50 の間です。
• -sharpness {int}: フィルターのシャープネスを 0 (強い) ～ 7 (弱い) の範囲で指定します。デフォルトは 0 です。
• -strong: デフォルトで使用される強力なフィルタリングを使用します。
• -nostrong：強力なフィルタリングを無効にします。
• -sharp_yuv: 必要に応じて、より正確かつ鮮明な RGB-YUV 変換を使用します。このプロセスは、デフォルトの「高速」RGB-YUV 変換よりも遅いことに注意してください。
• -sns {int}: 空間ノイズの振幅を 0 (弱) ～ 100 (強) の範囲で指定します。デフォルトは 50 です。
• -segments {int}: SNS アルゴリズムのセグメンテーション プロセス中にパーティションの数を変更します。範囲は 1 ～ 4 です。デフォルト値は 4 です。
• -partition_limit {int}: 特定のマクロブロックで使用されるビット数を制限することで品質を低下させます。範囲は 0 (ダウングレードなし、デフォルト) ～ 100 (完全なダウングレード) です。
• -v: 追加情報を印刷します。
• -print_psnr: 平均 PSNR (ピーク信号対雑音比) を計算して報告します。
• -print_ssim: 平均 SSIM を計算してレポートします。
• -print_lsim: 局所的な類似性の尺度を計算して報告します。
• -progress: コーディングの進捗率をレポートします。
• -quiet: 何も印刷しません。
• -short: 簡単な情報のみを印刷します。
• -map {int}: 追加のエンコード情報を出力する ascii マップ。可能なマッピング値の範囲は 1 ～ 6 です。これはデバッグに役立つだけです。
• -s {width} {height}: ITU-R BT.601 勧告に従って、入力ファイルが実際に Y'CbCr インスタンスで構成されることを指定します。
• -pre {int}: いくつかの前処理ステップを指定します。
• -alpha_filter {string}: アルファプレーンの予測フィルタリング方法を指定します。
• -alpha_method {int}: アルファ圧縮に使用するアルゴリズムを指定します: 0 または 1。0 は圧縮なしを意味し、1 は WebP ロスレス形式圧縮を使用します。デフォルト値は 1 です。
• -exact：透明部分のRGB値を保持します。デフォルトは圧縮を助けるためにオフになっています。
• -blend_alpha {int}: このオプションは、アルファ チャネル (存在する場合) とソース ファイルで指定された背景色を 0xrrggbb にブレンドします。その後、アルファ チャネルは不透明度 255 にリセットされます。
• -noalpha: このオプションを使用すると、アルファ チャネルが破棄されます。
• -hint {string}: 入力画像の種類を指定するプロンプトが表示されます。可能な値は次のとおりです: 写真、絵、または図。
• -metadata {string}: 入力ファイルの入力を出力ファイルにコピーします。有効な値は、all、none、exif、icc、xmp です。デフォルトはなしです。
• -noasm: すべてのアセンブリの最適化を無効にします。

dwebp は WebP を PNG にデコードできます。

のように

dwebp iutput.webp -o output.png

その中から次の中から選択します。

• -h: 使用状況の概要を印刷します。
• -version: バージョン番号を出力します。
• -o {string}: 出力ファイル名を指定します
• --string: 入力ファイルを明示的に指定します。このオプションは、入力ファイルが「-」で始まる場合に便利です。このオプションは最後に表示する必要があります。それ以降の他のオプションは無視されます。
• -bmp: 出力形式を非圧縮 BMP に変更します。
• -tiff: 出力形式を非圧縮 TIFF に変更します。
• -pam: 出力形式を PAM (アルファを保持) に変更します。
• -ppm: 出力形式を PPM (ドロップアルファ) に変更します。
• -pgm: 出力形式を PGM に変更します。
• -yuv: 出力形式を raw YUV に変更します。
• -nofancy：ファンシーには適用されません。
• -nofilter: ビットストリームでループ フィルター処理が必要な場合でも、ループ フィルター処理を使用しないでください。これにより、互換性のない出力に目に見えるチャンクが生成される可能性がありますが、デコードは高速化されます。
• -dither {strength}：ジッター強度を0～100で指定します。
• -nodither: すべてのディザリングを無効にします (デフォルト)。
• -mt: 可能であれば、デコードにはマルチスレッドを使用してください。
• -crop {x_position} {y_position} {width} {height}: [x 位置、y 位置、幅、高さ] 領域の画像をトリミングします。トリミングされる領域のサイズはソース画像サイズ以内である必要があります。
• -flip: 画像を垂直方向にデコードします。
• -scale {width} {height}: デコードされた画像を指定された幅と高さに圧縮します。
• -v: 追加情報 (特にデコード時間) を出力します。
• -noasm: すべてのアセンブリの最適化を無効にします。

webpmux

Webmux は、WebP を処理したり、静的 WebP イメージから動的 WebP を作成したり、動的 WebP から静的 WebP 画像を抽出したりするためのツールでもあります。XMP/EXIF データと ICC 記述ファイルも管理します。

文法

• webpmux -get GET_OPTIONS INPUT -o OUTPUT
• webpmux -set SET_OPTIONS 入力 -o 出力

その中から次の中から選択します。

• -getオプション: GET_OPTIONS
  • icc: ICC プロファイルを取得する
  • exif:EXIFメタデータを取得する
  • xmp : XMP メタデータを取得する
  • フレーム n: 動的 WebP ファイルから n 番目のフレームを取得します (n=0 は最後のフレーム レートを表します)
• -setオプション: SET_OPTIONS
  • icc file.icc : ICC プロファイルを設定します
  • exif file.exif : EXIF メタデータを設定します。
  • xmp file.xmp: XMP メタデータを設定します
• -stripオプション:STRIP_OPTIONS
  • icc : ICC プロファイルを削除します
  • exif : EXIFメタデータを削除します
  • xmp : XMP メタデータを削除します
• -durationオプション: DURATION_OPTIONS
  • 特定のフレーム間隔の継続時間を変更します。このオプションはアニメーション WebP に対してのみ有効であり、単一フレーム ファイルには影響しません。最初のフレームから始まり、0 は最後のフレームを表します。
  • 期間[,開始[,終了]]
    • * -duration d* : アニメーション全体の継続時間を設定します
    • * -duration d, f* : フレーム f からフレーム d までの継続時間を設定します。
    • * -duration d, start, end* : 開始フレームから終了フレームまでの継続時間を設定します
• -frameオプション: FRAME_OPTIONS
  • 静的 WebP イメージから動的 WebP ファイルを作成する
  • file_i +di[+xi+yi[+mi[bi]]]
    • file_i: i 番目の webp ファイル
    • xi,yi: フレーム画像のオフセット
    • di: 次のフレームが始まるまでの一時停止時間
    • mi: このフレーム画像の処理方法、0は背景なし、1は背景あり
    • bi: フレーム画像のブレンド方法、+b はブレンドあり、-b はブレンドなし
  • -loopn
    • ループの数。0 は無限ループを表します。有効な範囲は 0 ～ 65535 で、デフォルトは 0 です。
  • -bgcolorA、R、G、B
    • キャンバスの背景色

使用

ページ - 画像タグ

<picture>要素には、0 個以上の<source>要素と 1 つの要素を含めることで<img>、さまざまなディスプレイ/デバイス シナリオに対応した画像のバージョンが提供されます。ブラウザーは最も一致する子<source>要素を選択します。一致するものがない場合は、<img>要素の src 属性内の URL を選択します。<img>選択した画像は、要素が占めるスペースにレンダリングされます。

のように：

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Site Logo">
</picture>

ファイル構造

WebP ファイルは静止画像またはアニメーションを表し、オプションで透明度、カラー プロファイル、メタデータなどが含まれます。WebP は、VP8 キーフレーム エンコーディングを使用して、非可逆方式で画像データを圧縮するか、WebP ロスレス エンコーディング (将来的には他のエンコーディングも使用される可能性があります) を使用します。

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

• 可逆圧縮。画像は、WebP ロスレス形式を使用してロスレス圧縮できます。
• メタデータ。画像には、EXIF または XMP 形式で保存されたメタデータが含まれる場合があります。
• 透明性。画像には透明度やアルファ チャネルが含まれる場合があります。
• カラープロファイル。画像には、国際色彩協会の説明に従って ICC プロファイルが埋め込まれている場合があります。
• アニメーション。画像には複数のフレームがあり、フレーム間に一時停止があり、アニメーション化される場合があります。

WebP コンテナを参照する場合は、次のタイプを使用することをお勧めします。

コンテナフォーマット名	WebP
ファイル名の拡張子	.webp
MIMEタイプ	image/webp
統一タイプ識別子	org.webmproject.webp

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 ビット。ブロック識別用の ASCII 4 文字コード。
• チャンクサイズ: 32 ビット (uint32)。
• チャンクペイロード: チャンクサイズのバイト。データペイロード。「ブロック サイズ」が奇数の場合、パディング バイトが追加されます (0 である必要があります)。
• ChunkHeader('ABCD'): これは、単一チャンクの FourCC およびチャンク サイズ ヘッダーを記述するために使用されます。'ABCD' はチャンクの FourCC です。この要素のサイズは 8 バイトです。

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'      |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

• リフ：32ビット。ASCII 文字の RIFF。
• ファイル サイズ: 32 ビット (uint32)。ファイル サイズ (バイト単位)。
• WEBP: 32 ビット。ASCII 文字 WEBP。これが 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
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                    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 チャンク ヘッダー。VP8 ビットストリーム データのサイズ、フレーム内の VP8 データの長さと幅、およびその他の情報を定義します。

VP8 データ: VP8 ビットストリーム データ。

VP8 ビットストリーム形式の定義はrfc6386にあり、主に画像データを YUV 形式に変換する方法を定義しています。

ロスレス WebP ブリーフ ファイル形式

この形式は、ロスレス WebP (オプションで透過的) をエンコードする場合に使用され、拡張機能は必要ありません。古い W​​ebP ソフトウェアはこの形式をサポートしていない可能性があることに注意することが重要です。

 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                           |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

属性の意味は非可逆 WebP の簡易形式に似ています。VP8L の定義は次のドキュメントにあります: https://chromium.googlesource.com/webm/libwebp/+/master/doc/webp-lossless-bitstream-仕様.txt

拡張フォーマット

拡張フォーマットには次のようなものがあります。

• VP8X は、使用される機能を指定するために使用されます
• カラー設定用のオプションの「ICCP」
• アニメーション制御用のオプションの「ANIM」
• EXIFメタデータのオプションの「EXIF」
• XMP メタデータのオプションの「XMP」

静止画像の場合、画像データには次のデータ フレームが 1 つ含まれます。

• オプションの透明サブチャンク
• 1ビットストリームサブチャンク
• 動画の場合、画像データには複数のフレームのデータが含まれます。

拡張ヘッダー形式:

 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    |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

• ICC プロファイル(I): 設定されている場合、ICC プロファイルが含まれていることを示します。
• アルファ(L)：画像に透過データが含まれる場合に設定します。
• EXIFメタデータ(E) EXIFメタデータが含まれる場合に設定します。
• XMPメタデータ(X)：XMPメタデータが含まれる場合に設定されます。
• アニメーション(A): 動的 WebP が設定され、ANIM および ANMF データ ブロック内のデータがアニメーションの制御に使用されます。
• キャンバスの幅 - 1: キャンバスの実際の幅は、この値 + 1 です。
• キャンバスの高さ - 1: キャンバスの実際の高さは、この値 + 1 です。

アニメーション

WebP アニメーションは、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           |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

• 背景色: キャンバスの背景色を定義します。BGRA 順に保存されます。この色は、データの各フレームの未使用領域に塗りつぶされます。
• LoopCount: ループの数。0 は無限ループを意味します。

このデータ ブロックは、アニメーション フラグが設定されているときに表示される必要があります。アニメーションフラグが表示されない場合、データブロックは無視されます。

ANMFチャンク：

アニメーションの場合、このデータ ブロックには画像の 1 フレーム分のデータが含まれます。

 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：フレームデータの左上隅のX座標がこの値*2となります。
• フレームY：フレームデータの左上隅のY座標がこの値*2となります。
• フレーム継続時間: フレーム再生後の遅延時間 (ミリ秒単位)。
• ブレンド方法 (B): 前のキャンバスの対応する透明ピクセルをブレンドする方法を指定します。0 に設定すると、前のフレームの処理後に透明ブレンドが使用されます。1 に設定すると、混合は行われず、レンダリング中に長方形の領域が直接カバーされます。
• 破棄方法 (D): フレーム データが表示された後にキャンバス上でどのように処理されるかを指定します。0に設定すると何も処理されず、1に設定するとキャンバスの長方形領域がANIMで定義された背景色に変換されます。
• フレーム データ: 2 バイト単位で、画像のビットストリーム データとオプションの透明度データが含まれます。

アルファ透明

 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...                        |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

• 前処理 §: 圧縮における前処理の使用を示します。
• フィルタリング方法 (F): フィルタリング方法。0-フィルタリングなし、1-水平フィルタリング、2-垂直フィルタリング、3-勾配フィルタリング。
• 圧縮方法 ©: 0 - 圧縮なし、1 - WebP ロスレス形式圧縮を使用します。
• アルファ ビットストリーム: エンコードされた透明ビットストリーム データ

カラー プロファイルとメタデータ データのファイル形式は似ていますが、ヘッダーのメインの ASCII コードが異なります。

カラープロファイル

 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                           |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

Metadata

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                          |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

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                           |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

原理

WebP 圧縮は主に、非可逆圧縮、可逆圧縮、および透過チャネル アルファを使用した非可逆圧縮に分類されます。主な原則については、公式ドキュメントwebp-compressionを参照してください。

不可逆損失WebP

非可逆 WebP は、VP8 ビデオ符号化における予測符号化方式に基づいて画像データを圧縮します。その基本的な手順は JPEG 圧縮と同様で、主にフォーマット変換、サブブロック分割、予測符号化、FDCT、量子化、Z 配置、エントロピー符号化が含まれます。処理の流れは以下の通りです。 赤で示した部分がJPEGと異なる部分です。

• 1.フォーマット変換: 圧縮前の画像データが RGB フォーマットである場合、Y は輝度成分、UV は彩度成分を表す YUV フォーマットに変換する必要があります。YUV 形式に変換される理由は、人間の視覚は彩度よりも明るさにはるかに敏感であるため、彩度データのストレージを適切に削減することでデータが占めるスペースを節約できますが、データには大きな影響を与えません。たとえば、隣接する 2 つまたは 4 つのピクセルだけが 1 組の UV 値を保存します。
• 2.マクロ ブロックの分割: 次に、データを 8x8 または 16x16 マクロ ブロックに分割します。
• 3.予測符号化: 予測符号化の原理は、以前に符号化されたマクロブロックに基づいて冗長なアクションの色やその他の情報を予測することであり、フレーム内予測に属します。次のイントラ予測モードが各マクロブロックに使用できます。
  • H_PRED (水平予測): ブロックの左側の列 L を使用して、ブロック内の各列を埋めます。
  • V_PRED (垂直予測): ブロックの上の行 A を使用して、ブロック内の各行を埋めます。
  • DC_PRED (DC 予測): L および A のすべてのピクセルの平均を、ブロックを満たす唯一の値として使用します。
  • TM_PRED (TrueMotion 予測): プログレッシブ方式を使用して上の行のプログレッシブ差分を記録し、L に基づいて同じ差分値で各行を展開します。

• 4. FDCT : FDCT (順方向離散コサイン変換) は、空間領域のピクセルのセットを周波数領域の係数に変換します。FDCT は各マクロブロックに対して実行され、変換されたデータの低周波部分を分配します。左上隅データブロックでは高周波部分が右下に集中しており、左上の最初の係数をDC係数、その他をAC係数と呼びます。
• 5.量子化: 量子化は、圧縮時にデータを失う主要なステップであり、その主な原理は、DCT 変換後のマクロブロック内の各値を、量子化テーブル内の対応する係数で除算し、四捨五入することです。このうち、量子化テーブルの高周波部分に対応する係数は低周波部分の係数に比べて非常に大きく、量子化後は高周波部分の周波数係数は大幅に減衰、あるいはクリアされますが、低周波部分の周波数係数はより適切に保存されます。人間の目は低周波部分により敏感であるため、画像への量子化と復元は視覚効果にあまり影響を与えませんが、データは効果的に圧縮されます。量子化の最終的な目標は、低周波数部分の非ゼロ係数の振幅を減らし、高周波数部分のゼロ値係数の数を増やすことです。
• 6. Z 配置: その後のエンコードを容易にするために、エンコード前にデータ ブロックを再配置する必要があります。これにより、低周波部分のデータが前に配置され、高周波部分のデータが後ろに配置されます。配列内の連続するゼロ値の数を増やすために戻る量を増やすため、Z 字型の配置が採用されます。
• 7. DPCM : DPCM (差動パルス符号変調) を使用して DC 係数をエンコードできます。DC 係数の値が大きく、隣接するデータ ブロックの DC 係数の差がそれほど大きくないため、DPCM を使用して隣接するデータ ブロック間の量子化された DC 係数の差を符号化することができ、それにより圧縮率が向上します。
• 8.ランレングス符号化: ランレングス符号化は、同じデータが複数回繰り返される状況に基づいて表現を簡略化するアルゴリズムです。たとえば、1111222222333 は (1,4)(2,6)(3, 3) ランレングスコーディングによる。量子化された AC 係数には連続したゼロ値の係数が多数含まれているため、ランレングス符号化を使用して符号化してデータ長を効果的に圧縮できます。
• 9.エントロピー符号化: エントロピー符号化は可逆データ圧縮符号化方式であり、WebP ではエントロピー符号化方式としてブール算術符号化が使用されます。他のエントロピー コーディング方法との違いは、他のエントロピー コーディング方法では通常、入力メッセージをシンボルに分割して各シンボルをエンコードするのに対し、算術コーディングでは入力メッセージ全体を (0.0 ≤ n < 1.0) 10 進数 n を満たす数値に直接エンコードすることです。 。メッセージが長ければ長いほど、エンコードでメッセージを表す間隔が小さくなり、この間隔を表すために必要なバイナリ ビットが多くなります。
• 10. その他: WebP には、適応ブロック量子化 (異なる領域のマクロブロックに異なる圧縮パラメータを割り当てる)、ループ フィルタリングなど、いくつかの詳細な手順もあります。
  • 適応ブロッキング: 画質を向上させるために、画像は明らかに類似した特性を持つ領域に分割されます。これらのセグメントごとに、圧縮パラメータ (量子化ステップ、フィルタ強度など) が個別に調整されます。ビットを最も有用な位置に再割り当てすることで、効率的な圧縮を実現できます。VP8 では、最大 4 つのセグメントが許可されます (VP8 ビットストリームの制限)。
    

上記の圧縮アルゴリズムに基づいて、非可逆 WebP が JPEG よりも優れている理由を結論付けることができます。

• 主な理由は予測コーディングです。
• 適応型ブロッキングによりパフォーマンスも向上します。
• ループ フィルタリングは、中ビット レートおよび低ビット レートで役立ちます。
• 算術符号化により、ハフマンと比較して圧縮能力が 5% ～ 10% 向上します。

VP8

WebP の非可逆圧縮アルゴリズムに関して言えば、VP8 ビデオ形式について言及する必要があります。

ロスレスWebP

ロスレス WebP は、予測空間変換、色空間変換、パレットの使用、複数のピクセルを 1 つのピクセルにパッケージ化する、アルファ値置換などのテクノロジーを含む、さまざまなテクノロジーを使用して画像データを変換することに基づいています。エントロピー コーディングでは、距離値の 2D コーディング テクノロジである、改良された LZ77-ハフマン コーディングを使用してスパース値を圧縮します。

• 予測子 (空間) 変換: 空間予測は、隣接するピクセルが相関していることが多いという事実を利用して、エントロピーを削減するために使用できます。予測子変換では、現在のピクセル値が既にデコードされたピクセルから (走査線順に) 予測され、残差値 (実際の予測) のみがエンコードされます。予測モードによって、使用する予測の種類が決まります。画像は正方形の領域に分割され、正方形内のすべてのピクセルが同じ予測モードを使用します。
• カラー (非相関) 変換: カラー変換の目的は、各ピクセルの 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 や可逆 WebP とは異なり、このエンコードでは、RGB チャネルの非可逆エンコードと透明チャネルの可逆エンコードが可能になります。このフォームは現在他の形式では利用できないため、現在透明性が必要な場合はロスレス PNG が使用され、その結果サイズが拡張されます。このタイプの画像の場合、WebP はより優れた圧縮効果を提供します。非可逆 WebP と比較すると、透過チャネルを追加してもサイズは 22% 増加するだけです。

したがって、透明度をサポートする PNG をロスレス + 透明度をサポートする WEBP に置き換えることで、サイズを平均 60% ～ 70% 節約できます。これは、より多くのアイコンを含む一部のモバイル Web サイトで証明されています。

動的WebP

ダイナミックWebPの原理はGIFやAPNGと同様で、各フレームに変更された領域の座標、長さ、幅、再生遅延などを記録し、復元・再生します。

互換性がある

Web対応状況

能力検査

方法 1. 小さな WebP 画像を使用して、現在の環境がサポートしているかどうかを確認します。

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    
    
    var kTestImages = {
    
    
		// 有损
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
		// 无损
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
		// 透明
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
		// 动画
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    let img = new Image();
    img.onload = function () {
    
    
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
    
    
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

方法 2. Canvas から WebP 形式の画像を作成して確認する

window.IS_SUPPORT_WEBP = (!![].map && 
    document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0);

WeChat Webはサポートされていません、WeChatアプレットは
iOS14以降でサポートされています

ネイティブ アプリ開発の場合、iOS と Android の両方で、公式に提供されている解析ライブラリhttps://github.com/carsonmcdonald/WebP-iOS-example、https://github.com/alexey-pelykh/を使用して静的 WebP をサポートできます。 webp-android-backport。

ただし、動的 ​​WebP をサポートしているのは現在 Facebook のオープン ソース ライブラリFrescoのみですが、Fresco は少なくとも API 9 のみをサポートしており、多くの関連ライブラリを参照しています。

---

関連リンク

• https://datatracker.ietf.org/doc/rfc6386/
• https://developers.google.com/speed/webp
• https://github.com/EverythingMe/webp-test#readme
• https://tools.ietf.org/html/rfc6386
• https://chromium.googlesource.com/webm/libwebp/+/master/doc/webp-lossless-bitstream-spec.txt
• https://github.com/alexey-pelykh/webp-android-backport
• https://github.com/carsonmcdonald/WebP-iOS-example