このギャラリーのコンテンツ
このギャラリー ページは、Google Chrome、Opera などの WebP 対応ブラウザで表示することをおすすめします。
Google Chrome にアクセスできない場合は、ローカル ドライブに画像をダウンロードして、WebP をサポートしている他のサービスで使用できます。
JPEG と WebP のサンプル画像ファイルと PNG ソース
以下の表は、比較のために拡大縮小された JPEG（左側）と WebP 画像（右側）を並べて示しています。WebP をネイティブにサポートするブラウザが存在するため、リリース時のように WebP 画像を PNG コンテナに配置することはなくなりました。画像ファイルのサイズは正確です。JPEG と WebP のサムネイルをクリックすると 大きな画像が新しいタブで開きます
サムネイルの下のファイルサイズは、サムネイルをクリックしたときに表示される画像のファイルサイズです。WebP 画像は JPEG 画像より 30% 以上小さくなります。
JPEG | WEBP |
|---|---|
| 「Nærøyfjorden（ノルウェー）- 出身地: Breiskrednosi. ユネスコ世界遺産」1 | |
 JPEG ファイルサイズ: 43.84 KB |
 WebP ファイルサイズ: 29.61 KB |
| 「Kayaker at Ekstremsportveko 2010, Voss」 2 | |
 JPEG ファイルサイズ: 86.25 KB |
 WebP ファイルサイズ: 59.18 KB |
| 「Parkrun」シーケンスのフレーム 103 | |
 JPEG ファイルサイズ: 297.05 KB |
 WebP ファイルサイズ: 198.38 KB |
| 画像: 「花に咲くヤマサクセン（Prunus avium）" 4 | |
 JPEG ファイルサイズ: 251.03 KB |
 WebP ファイルサイズ: 172.82 KB |
| 画像: 「Jaipur Maharaja Brass Band」、Chassepierre、ベルギーの炎の呼吸法5 | |
 JPEG ファイルサイズ: 120.78 KB |
 WebP ファイルサイズ: 80.76 KB |
画像クレジット
このページの画像は、さまざまなソースからのものです。ここでは、WebP のクオリティを示す魅力的でリッチな写真をいくつか選択しました。レナやヒヒなどの有名な古典画像は、残念ながら圧縮比較でよく使用されますが、残念ながら著作権保護の対象外です。
上の画像のクレジットは、ここに記載の順番です。
| 1 |
「Nærøyfjorden（ノルウェー）- 出身地: Breiskrednosi. ユネスコ世界遺産」 画像の作成者: Kjetil Birkeland Moe 作成者の許可を得て複製したものです。 PNG ソース JPEG と WebP の比較についての著者による ブログ投稿。マウスカーソルを合わせると、サンプルが有効になります。 |
| 2 |
「Kayaker at Ekstremsportveko 2010, Voss」 画像の作成者: Kjetil Birkeland Moe 作成者の許可を得て複製しています。 PNG ソース JPEG と WebP の比較についての著者による ブログ投稿。マウスカーソルを合わせると、サンプルが有効になります。 |
| 3 |
「Parkrun」シーケンスのフレーム 10 画像プロデューサー: Lars Haglund、SVT Sveriges Television AB プロデューサーの許可を得て複製 PNG ソース |
| 4 |
画像: 「花のワイルドチェリー（Prunus avium）」 画像作成者: Benjamin Gimmel PNG ソース 写真の提供元: クリエイティブ・コモンズ 表示 - 継承 3.0 Unported |
| 5 |
画像: 火の息をする「Jaipur Maharaja Brass Band」、Chassepierre ベルギー 著者: Luc Viatour PNG ソース 写真の提供元: クリエイティブ・コモンズ 表示 - 継承 3.0 非移植 ライセンス。 著者のウェブサイト: www.lucnix.be |
イメージの再現
再現性を確保し、いくつかの WebP 圧縮パラメータの使用を示すために、このギャラリーで画像を生成する際の具体的な手順を説明します。
ツール
元の画像を変換して再スケーリングするために、https://www.imagemagick.org から入手できる convert という名前の最新バージョンの ImageMagick を使用しました。バージョン情報は次のようになります。
Version: ImageMagick 6.5.7-8 2010-12-02 Q16 https://www.imagemagick.org
JPEG 圧縮については、IJG のリファレンス エンコーダのバージョン 8b（https://www.ijg.org/files/jpegsrc.v8b.tar.gz から入手可能）を使用しました。
バージョン情報は次のようになります。
Independent JPEG Group's CJPEG, version 8b 16-May-2010
Copyright (C) 2010, Thomas G. Lane, Guido Vollbeding
ソース PNG 画像の生成
まず、以下を使用するだけで JPEG ソースが可逆的に PNG 形式に変換されます。
convert in.jpg out.png
その後、次のコマンドを使用して、大きいソースイメージが小さい幅 1, 024 ピクセルに再スケーリングされます。
convert in.png -depth 16 -gamma 0.454545 -filter lanczos -resize 1024 -gamma 2.2 -depth 8 out.png
ソースの PNG 画像の最終セットが生成されます。
JPEG 形式への圧縮
JPEG のエンコーダ（cjpeg）は、PPM 形式の入力画像を受け取ります。生成には convert を使用します。完全な変換シーケンスは次のようになります。
convert in.png tmp.ppm
cjpeg -optimize -quality 80 -outfile out.jpg tmp.ppm
これで品質係数が 80 の最適化された JPEG ファイルが生成されます。
WebP 形式への圧縮
最適化した JPEG ファイルと比較して、ファイルサイズを 30% 削減することを目標としました。このように、各画像のターゲット サイズを明示的に指定しています。さらに、cwebp ツールの -f オプションを使用して、各画像のフィルタリング強度にアドホックな値を設定しました。また、一部の画像では、-sns オプションを使用することで空間ノイズ シェーピングの振幅が強化されています。使用した正確なコマンドラインは次のようになります。
cwebp -m 6 -f 50 -size 31500 1.png -o 1.webp
cwebp -m 6 -f 20 -sns 100 -size 62000 2.png -o 2.webp
cwebp -m 6 -sns 90 -size 213000 3.png -o 3.webp
cwebp -m 6 -f 40 -size 181000 4.png -o 4.webp
cwebp -m 6 -f 40 -size 89000 5.png -o 5.webp
全体として、生成された WebP ファイルにより、JPEG ファイルサイズに比べて全世界で 32% の節約を実現できました。
このページで使用される WebP サムネイルも、JPEG の同等のサムネイルと比べて 26% 小さくなっています。