このギャラリーのコンテンツ
このギャラリー ページは、Google Chrome、Opera など、WebP をサポートしているブラウザで表示することをおすすめします。
Google Chrome にアクセスできない場合は、 ローカル ドライブを使用して、他の Google Cloud プロダクトと WebP をサポートしている必要があります。
JPEG と WebP の画像ファイルのサンプルと PNG ソース
次の表に、スケーリングされた JPEG 画像（左）と WebP 画像（右）を並べて示します。WebP をネイティブにサポートするブラウザが存在するため、リリース時のように WebP 画像を PNG コンテナに配置することはなくなりました。画像ファイルのサイズが正確である。JPEG と WebP のサムネイルをクリックすると、 新しいタブで大きな画像を表示
サムネイルの下のファイルサイズは、画像のファイルサイズに対応します。 サムネイルをクリックすると表示されますWebP 画像は JPEG 画像よりも 30% 以上小さくなります。
JPEG | WebP |
|---|---|
| 「ノルウェーの Nærøyfjorden - Breiskrednosi から。ユネスコ世界 遺産」1 | |
<ph type="x-smartling-placeholder"></ph>
 JPEG ファイルサイズ: 43.84 KB |
 WebP ファイルサイズ: 29.61 KB |
| 「Kayaker at Ekstremsportveko 2010, Voss」2 | |
<ph type="x-smartling-placeholder"></ph>
 JPEG ファイルサイズ: 86.25 KB |
 WebP ファイルサイズ: 59.18 KB |
| 「Parkrun」シーケンスのフレーム 10 3 | |
<ph type="x-smartling-placeholder"></ph>
 JPEG ファイルサイズ: 297.05 KB |
 WebP ファイルサイズ: 198.38 KB |
| 画像: 「野生のチェリー（Prunus avium）の花」 4 | |
 JPEG ファイルサイズ: 251.03 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP ファイルサイズ: 172.82 KB |
| 画像: 火を吐く「Jaipur Maharaja Brass Band」の演奏、ベルギーの Chassepierre 5 | |
<ph type="x-smartling-placeholder"></ph>
 JPEG ファイルサイズ: 120.78 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP ファイルサイズ: 80.76 KB |
画像クレジット
このページの画像は、さまざまな情報源から提供されています。Google には は WebP の特質を示すために魅力的でリッチな写真をいくつか選びました。
上記の画像のクレジットは次のとおりです。
| 1 |
「Nærøyfjorden, Norway - from Breiskrednosi.ユネスコ世界遺産」 画像の著作権者: Kjetil Birkeland Moe 著作権者の許可を得て掲載しています。 PNG ソース <ph type="x-smartling-placeholder"></ph> JPEG と WebP を比較した、著者によるブログ投稿。マウスオーバーすると例が表示されます。 |
| 2 |
「Voss の Ekstremsportveko 2010 でカヤックを漕ぐ人」 画像の著者: Kjetil Birkeland Moe 著者の許可を得て掲載しています。 PNG ソース JPEG と WebP の比較に関する著者のブログ投稿。ネズミ カーソルを合わせると例がアクティブになります。 |
| 3 |
「Parkrun」シーケンスのフレーム 10 画像プロデューサー: Lars Haglund、SVT Sveriges Television AB プロデューサーの許可を得て再現 PNG ソース |
| 4 |
画像: 「野生のチェリー（Prunus avium）の花」 画像の作成者: Benjamin Gimmel PNG ソース 写真は、 クリエイティブ コモンズ 表示 - 継承 3.0 非移植ライセンスに基づいて使用許可されています。 |
| 5 |
画像: 火を吐く「Jaipur Maharaja Brass Band」Chassepierre ベルギー 作成者: Luc Viatour PNG ソース 写真は、 クリエイティブ コモンズ 表示 - 継承 3.0 非移植ライセンスに基づいて使用許可されています。 著者のウェブサイト（www.lucnix.be） |
画像の再現
再現性のため、および一部の WebP の使用を説明するために 説明するので、ここでは、データ圧縮を このギャラリーの画像を生成しています
ツール
ソース画像を変換して再スケーリングするために、convert という名前の最新バージョンの ImageMagick ツールを使用しました。このツールは https://www.imagemagick.org で入手できます。バージョン情報は次のようになります。
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 ファイルによって世界全体で 32% の節約を達成しました。 JPEG ファイルのサイズに対応してください
このページで使用されている WebP サムネイルも、JPEG に比べて 26% 小さくなっています。