WebP ギャラリー

このギャラリー ページは、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 画像
WebP ファイルサイズ: 29.61 KB
「Kayaker at Ekstremsportveko 2010, Voss」2
<ph type="x-smartling-placeholder"></ph>
JPEG ファイルサイズ: 86.25 KB 		WebP 画像
WebP ファイルサイズ: 59.18 KB
「Parkrun」シーケンスのフレーム 10 3
<ph type="x-smartling-placeholder"></ph>
JPEG ファイルサイズ: 297.05 KB 		WebP 画像
WebP ファイルサイズ: 198.38 KB
画像: 「野生のチェリー（Prunus avium）の花」 4

JPEG ファイルサイズ: 251.03 KB 		<ph type="x-smartling-placeholder"></ph> WebP 画像
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 画像
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% 小さくなっています。