WebP とはメリット
WebP は可逆圧縮と可逆圧縮の方法で、大規模な ウェブ上に発見されたさまざまな写真、半透明、およびグラフィカルな画像。 非可逆圧縮の程度は調整できるため、ユーザーは ファイルサイズと画質のトレードオフがありますWebP では通常、 JPEG や JPEG 2000 よりも平均で 30% 高い圧縮率（画像損失なし） （比較調査を参照）。
WebP 形式の基本的には、小さくて見栄えの良い画像を作成することを目的としています。 ウェブの高速化に役立ちます
WebP をネイティブにサポートするウェブブラウザを教えてください。
サイトのパフォーマンス向上に関心のあるウェブマスターは、 現在の画像に合わせて最適化された WebP の代替手段を作成し、 WebP をサポートするブラウザにターゲットが絞られます。
- WebP ロッシーのサポート
<ph type="x-smartling-placeholder">
- </ph>
- Google Chrome（パソコン）17 以降
- Google Chrome for Android バージョン 25 以降
- Microsoft Edge 18 以降
- Firefox 65 以降
- Opera 11.10 以降
- ネイティブ ウェブブラウザ、Android 4.0 以降（ICS）
- Safari 14 以降（iOS 14 以降、macOS Big Sur+）
- WebP 非可逆、可逆変換、アルファ版サポート
<ph type="x-smartling-placeholder">
- </ph>
- Google Chrome（パソコン）23 以降
- Google Chrome for Android バージョン 25 以降
- Microsoft Edge 18 以降
- Firefox 65 以降
- Opera 12.10 以降
- ネイティブ ウェブブラウザ、Android 4.2 以降（JB-MR1）
- Pale Moon 26 歳以上
- Safari 14 以降（iOS 14 以降、macOS Big Sur+）
- WebP アニメーションのサポート
<ph type="x-smartling-placeholder">
- </ph>
- Google Chrome（パソコン、Android）32 以降
- Microsoft Edge 18 以降
- Firefox 65 以降
- Opera 19 以降
- Safari 14 以降（iOS 14 以降、macOS Big Sur+）
関連項目:
WebP のブラウザ サポートを検出するにはどうすればよいですか？
WebP 画像を表示可能なクライアントにのみ配信する場合 できないクライアントには従来の形式にフォールバックできます。幸い、 WebP のサポートを検出する手法はいくつかあります。 実装できます一部の CDN プロバイダは WebP サポート検出機能を提供しています。 サービスの一部として含まれています
Accept ヘッダーを介したサーバーサイドのコンテンツ ネゴシエーション
通常は、ウェブ クライアントから「Accept」コマンドをリクエスト ヘッダー。 コンテンツ形式を判断できますもし ブラウザが事前に「受信する」ことをimage/webp 形式 ウェブサーバーは WebP 画像を安全に送信できることを認識しているため、 コンテンツネゴシエーション。詳しくは、以下のリンクをご覧ください。
Modernizr
Modernizr は、HTML5 と Chronicle の ウェブブラウザでの CSS3 機能のサポート。以下のプロパティを確認します。 Modernizr.webp、Modernizr.webp.lossless、Modernizr.webp.alpha、 Modernizr.webp.animation:
HTML5 <picture> 要素
HTML5 では <picture> 要素をサポートしているため、複数の
クライアントがリクエストできるように、優先度の高い順に代替画像ターゲット
適切に表示できる最初の候補画像が作成されます。詳しくは、
HTML5 Rocks に関するこちらのディスカッションをご覧ください<picture> 要素は次のとおりです。
対応ブラウザが増えています。
独自の JavaScript
もう 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"
};
var 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];
}
画像の読み込みは非ブロッキングかつ非同期です。つまり WebP サポートに依存するコードは、可能であればコールバック コードで 使用します。
Google が WebP をオープンソースとしてリリースしたのはなぜですか？
Google はオープンソース モデルの重要性を強く信じています。WebP を使用 誰でもこのフォーマットを使用して、改善を提案できます。あり WebP は今後もより一層便利になるでしょう 画像形式として分類されます。
個人の画像ファイルを WebP に変換するにはどうすればよいですか？
WebP コマンドライン ユーティリティを使用して、個人用画像ファイルを変換できます。 変換できます。詳しくは、WebP の使用をご覧ください。
変換するイメージが多数ある場合は、プラットフォームのシェルを使用して 運用が簡素化されますたとえば、フォルダ内のすべての JPEG ファイルを変換するには、 次のとおりです。
Windows:
> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )
Linux / macOS:
$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done
WebP の画質を自分で判断するにはどうすればよいですか？
現在、WebP ファイルを一般的な形式に変換して表示できます。 可逆圧縮（PNG など）を使用して PNG ファイルを 任意のブラウザや画像ビューアを使用できます。WebP の品質については、 このサイトのギャラリーで並べて写真を表示 比較できます。
ソースコードを入手するにはどうすればよいですか？
コンバータ コードは WebP オープンソース プロジェクトのダウンロード セクション できます。軽量デコーダのコードと VP8 仕様については、 WebM のサイトをご覧ください。詳しくは、 コンテナの [RIFF コンテナ] ページ 仕様。
WebP 画像の最大サイズはどのくらいですか？
WebP は VP8 とのビットストリーム互換で、幅と高さに 14 ビットを使用します。 WebP 画像の最大ピクセルサイズは 16383 x 16383 です。
WebP 形式ではどのような色空間がサポートされていますか？
VP8 ビットストリームと同様、非可逆 WebP は VP8 ビットストリーム 8 ビットの Y'CbCr 4:2:0（よく YUV420 と呼ばれます）画像形式。「 2「フォーマットの概要」 準拠しており、 VP8 データ形式とデコードのガイド をご覧ください。
Lossless WebP は RGBA 形式でのみ動作します。詳しくは、 WebP Lossless ビットストリームの仕様
WebP 画像はソース画像よりも大きくできますか？
○。通常は非可逆形式から WebP 可逆形式または WebP 形式への変換時に 。これは主に色空間の違い（YUV420 と ARGB）によるものです。 両者間のコンバージョンです
一般的な状況は次の 3 つです。
- ソース画像が可逆 ARGB 形式の場合、空間ダウンサンプリングは より圧縮しにくい新色が導入されます コピーされます。この状況は通常、 は、いくつかの色の PNG 形式で、非可逆 WebP（または、同様に 非可逆 JPEG など）は、ファイルサイズが大きくなる可能性があります。
- ソースが非可逆形式の場合は、可逆 WebP 圧縮を使用 ソースの不可逆的な性質を取得すると、通常、 大きなファイルにしますこれは WebP に固有のものではなく、 たとえば、JPEG ソースを可逆 WebP 形式や PNG 形式に変換できます。
- ソースが非可逆形式であり、圧縮しようとしている場合
画質の高い非可逆的 WebP として配信できますたとえば、
画質 80 で保存された JPEG ファイルを画質 95 の WebP ファイルに変換する
両方の形式が非可逆であっても、通常はより大きいファイルになります。
多くの場合、ソースの品質を評価することは不可能なため、
ファイルサイズが一貫して大きい場合は、ターゲット WebP 品質を下げる。
もう 1 つの方法は、品質設定を使用せずに、
cwebpツールの-sizeオプションを使用して、特定のファイルサイズをターゲットにする または同等の API を使用できます。たとえば、元のファイルの 80% をターゲットに設定 サイズの方が堅牢である可能性があります。
JPEG ソースを非可逆 WebP に変換し、PNG ソースを可逆変換すると、 WebP では、このような予想外のファイルサイズは発生しません。
WebP はプログレッシブ ディスプレイやインターレース ディスプレイをサポートしていますか？
WebP では、JPEG 形式のプログレッシブ デコードやインターレース デコードのリフレッシュは提供されていません。 PNG Sense。これを使用すると、仮想マシンの CPU とメモリに デコードします。これは、各更新イベントが 使用します。
平均的に、プログレッシブ JPEG 画像のデコードは、 baseline を 1 つ 3 回実行します。
一方の WebP では、増分デコードにより、利用可能なすべての受信 ビットストリームのバイトが、表示可能なサンプル行を生成するために使用されます。 必要があります。これにより、メモリや CPU を節約し、コンテナの ダウンロードのステータスを視覚的に把握できます。増分 デコード機能は Advanced Decoding API:
Android プロジェクトで libwebp Java バインディングを使用するにはどうすればよいですか？
WebP はシンプルなエンコーダとデコーダへの JNI バインディングをサポート
swig/ ディレクトリ。
Eclipse でライブラリをビルドします。
- 以下が ADT プラグイン NDK ツールとともにインストールされており、NDK パスが正しく設定されている （[Preferences] > [Android] > [NDK]）。
- 新しいプロジェクトの作成: [File] >新規 >プロジェクト >Android アプリケーション プロジェクト。
- クローンまたは
libwebp を、新しいプロジェクトの
jniという名前のフォルダに展開します。 swig/libwebp_java_wrap.cをLOCAL_SRC_FILESリストに追加します。- 新しいプロジェクトを右クリックして [Android Tools] を選択します。追加 Native Support ... を選択して、ビルドにライブラリを含めます。
プロジェクトのプロパティを開き、[C/C++ Build] > [C/C++ Build] に移動します。動作。追加
ENABLE_SHARED=1でBuild (Incremental build)セクションに移動し、ビルドする libwebp を共有ライブラリとして使用します。注
NDK_TOOLCHAIN_VERSION=4.8を設定すると、全般的に改善されます 32 ビットのビルド パフォーマンス。swig/libwebp.jarをlibs/プロジェクト フォルダに追加します。プロジェクトをビルドします。これにより
libs/<target-arch>/libwebp.soが作成されます。実行時にライブラリを読み込むには、
System.loadLibrary("webp")を使用します。
なお、ライブラリは、ndk-build と付属の
Android.mk。その場合、上記の手順の一部を再利用できます。
C# で libwebp を使用するにはどうすればよいですか？
WebP は、libwebp API をエクスポートする DLL としてビルドできます。これらの関数は、 C# にインポートします。
libwebp.dll をビルドします。これにより、WEBP_EXTERN が適切に設定され、API がエクスポートされます。 使用できます。
libwebp> nmake /f Makefile.vc CFG=release-dynamiclibwebp.dll をプロジェクトに追加し、必要な関数をインポートします。 シンプルな API
WebPFree()を呼び出して、返されたバッファを解放する必要があります。[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)] static extern int WebPEncodeBGRA(IntPtr rgba, int width, int height, int stride, float quality_factor, out IntPtr output); [DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)] static extern int WebPFree(IntPtr p); void Encode() { Bitmap source = new Bitmap("input.png"); BitmapData data = source.LockBits( new Rectangle(0, 0, source.Width, source.Height), ImageLockMode.ReadOnly, PixelFormat.Format32bppArgb); IntPtr webp_data; const int size = WebPEncodeBGRA(data.Scan0, source.Width, source.Height, data.Stride, 80, out webp_data); // ... WebPFree(webp_data); }
アニメーション WebP を使用する理由
アニメーション GIF と比較したアニメーション WebP のメリット
WebP は 24 ビット RGB カラー（8 ビット アルファ チャンネル）をサポートしていますが、 GIF の 8 ビットカラーと 1 ビットアルファ
WebP は、非可逆圧縮と可逆圧縮の両方をサポートしています。実際、1 つの 非可逆フレームと可逆フレームを組み合わせることができます。GIF は 非可逆圧縮ですWebP の非可逆圧縮技術は、Google の 現実世界の動画から生成されるアニメーション画像まで幅広く対応しています。これはますます人気が高まっており、 生成します。
WebP に必要なバイト数は GIF よりも少なくなります1。 非可逆 WebP に変換されたアニメーション GIF はサイズが 64% 小さく、可逆圧縮 WebP の方が 19% 小さい。これは、モバイル ネットワークでは特に重要です。
シークがある場合、WebP のデコード時間が短くなります。イン 点滅したり、タブをスクロールしたり、タブを切り替えたりすることで、 画像の非表示 / 表示を切り替えると、アニメーションが一時停止され、その後、 別のポイントにスキップします過度な CPU 使用率による フレームをドロップするアニメーションでは、デコーダでシーケンスを 追加します。これらのシナリオでは、アニメーション WebP は合計で 0.57 倍かかります。 GIF 形式2 のデコード時間によりジャンクが減少 CPU 使用率の急増からの回復時間を短縮できます。これは、 2 つのメリットがあります。
WebP 画像には、各フレームにアルファが含まれているかどうか、 フレームのデコードが不要になります これにより、特定の過去のどのフレームが過去のどのフレームを 依存するため、以前の画像の不要なデコードが 使用できます。
最新の動画エンコーダと同様に、WebP エンコーダは キーフレームを一定の間隔で表示できます（ほとんどの GIF エンコーダには採用されていません）。 これにより、長いアニメーションでのシーク動作が大幅に向上します。促進するために 画像サイズを大幅に拡大せずにこのようなフレームを挿入する、 追加 '統合方法'フラグ に加えて、GIF で使用されるフレーム処理方法も選択できます。 これにより、画像全体がクリアされたかのようにキーフレームを描画できます 前のフレームが強制的に変更され、 フルサイズで表示できます。
アニメーション GIF と比較したアニメーション WebP のデメリット
シークなしの場合、WebP の直線デコードは GIF よりも CPU 使用率が高い。ロッシー WebP では、2.2 倍のデコード時間が GIF ですが、ロスレス WebP は 1.5 倍かかります。
WebP のサポートは GIF サポートほど広くありません。 事実上普遍的であることです。
WebP サポートをブラウザに追加すると、コード フットプリントが増加し、 できます。Blink では、これは約 1,500 行の追加です。 コード（WebP demux ライブラリや Blink 側の WebP イメージを含む） あります。なお、将来的にこの問題は軽減される可能性があります。 WebP と WebM はより共通のデコード コードを共有しています。 WebM に組み込まれています。
<img> で WebM をサポートしないのはなぜですか？
長期的には、<img> 内で動画形式をサポートすることが理にかなっています
できます。ただし、今回は、<img> の WebM がデータを埋められるように、
アニメーション WebP の役割には問題があります。
以前のフレームに依存するフレームをデコードする場合、WebM は アニメーション WebP よりも 50% 多くのメモリを使用して、最小数を保持 以前のフレーム3。
動画のコーデックとコンテナのサポートはブラウザによって大きく異なり、 できます。コンテンツの自動コード変換を容易にするため（例: ブラウザが Accept ヘッダーを追加する必要があります。 サポートされる形式を示しますこれでも 「video/webm」のような MIME タイプでは不十分であるまたは「video/mpeg」静止画 コーデックのサポートを示さない（VP8 と VP9 など）。反対側 WebP 形式が事実上凍結されます アニメーション WebP（WebP の動作）をすべての UA で配布することに同意している 一貫性を持たせる「image/webp」はAccept ヘッダーが WebP サポートを示すためにすでに使用されています。新しい Accept ヘッダーの変更はありません。 必要があります。
Chromium の動画スタックの最適化 スムーズに再生され、1 対 1 のデバイスで 1 つか 2 つの動画が あります。その結果、システムに対して積極的に実装を行うことになります。 リソース（スレッド、メモリなど）を使用して、再生品質を最大化します。そのような 同時視聴する動画の数に応じて適切に調整できず、 画像を多用したウェブページで使用できるように再設計する必要があります。
WebM には現在、すべての圧縮技術が組み込まれていない 使用できます。その結果 この画像 WebP を使用すると、他の方法より圧縮率が大幅に向上します。
1 アニメーション GIF とアニメーション WebP のすべての比較では、 は、ウェブからランダムに取得された約 7,000 枚のアニメーション GIF 画像のコーパスを使用しました。 これらの画像は、「gif2webp」を使用してアニメーション WebP に変換されましたツールを使用して （最新のセキュリティ テレメトリーを libwebp ソースツリー 2013 年 10 月 8 日時点のものです。比較数値はこれらのデータの平均値です 作成します。
2 デコード時間は最新の libwebp + ToT を使用して計算されています。 Blink（2013 年 10 月 8 日時点） ベンチマーク ツールを使用します。"デコード時刻 「シーク付き」「最初の 5 つのフレームをデコードし、フレームのクリアと 次の 5 つのフレームをデコードする」などです。
3 WebM は、各フレームとともに 4 つの YUV 参照フレームをメモリに保持します。
（幅+96）×（高さ+96）ピクセルを格納しますYUV 4:2:0 の場合、6 あたり 4 バイトが必要
（1 ピクセルあたり 3/2 バイト）。これらの参照フレームでは
4*3/2*(width+96)*(height+96) バイトのメモリ。一方 WebP では
前のフレーム（RGBA）が利用可能であれば、
4*width*height バイトのメモリ。
4 アニメーション WebP レンダリングには Google Chrome バージョン 32 以降が必要です