WebP ギャラリー

このギャラリー ページは、次のように WebP をサポートするブラウザで表示することをおすすめします。 Google Chrome、Opera など

Google Chrome にアクセスできない場合は、 ローカル ドライブを使用して、他の Google Cloud プロダクトと WebP をサポートしている必要があります。

JPEG と WebP のサンプル画像ファイル、PNG ソース

下の表は、拡大縮小された JPEG(左側)と WebP 画像(右側)を示しています。 並べて比較できます。WebP をネイティブにサポートするブラウザは存在するため、 リリース時とは異なり、PNG コンテナには WebP 画像を配置しなくなりました。画像 同じです。JPEG と WebP のサムネイルをクリックすると、 新しいタブで大きな画像を表示

サムネイルの下のファイルサイズは、画像のファイルサイズに対応します。 表示されます。WebP 画像が 30% 以上小さい 画質は JPEG より高くなります

JPEG

WebP

「NÃrøyfjorden, Norway - from Breiskrednosi.ユネスコ世界 遺産」1
<ph type="x-smartling-placeholder"></ph>
JPEG ファイルサイズ: 43.84 KB
<ph type="x-smartling-placeholder"></ph> WebP 画像
WebP ファイルサイズ: 29.61 KB
「Kayaker at Ekstremsportveko 2010, Voss」。 2
<ph type="x-smartling-placeholder"></ph>
JPEG ファイルサイズ: 86.25 KB
<ph type="x-smartling-placeholder"></ph> WebP 画像
WebP ファイルサイズ: 59.18 KB
「Parkrun」のフレーム 10シーケンス 3
<ph type="x-smartling-placeholder"></ph>
JPEG ファイルサイズ: 297.05 KB
<ph type="x-smartling-placeholder"></ph> WebP 画像
WebP ファイルサイズ: 198.38 KB
画像: 「花の中の野生チェリー(Prunus avium)4
<ph type="x-smartling-placeholder"></ph>
JPEG ファイルサイズ: 251.03 KB
<ph type="x-smartling-placeholder"></ph> WebP 画像
WebP ファイルサイズ: 172.82 KB
画像: 火で呼吸する「ジャイプル マハラジャ ブラスバンド」シャセピエール(ベルギー) 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
著者の許可を得て複製しています。
<ph type="x-smartling-placeholder"></ph> PNG ソース
<ph type="x-smartling-placeholder"></ph> JPEG と WebP を比較した著者によるブログ投稿。ネズミ カーソルを合わせると例がアクティブになります。
2 「Kayaker at Ekstremsportveko 2010, Voss」
画像の作成者: Kjetil Birkeland Moe
著者の許可を得て複製しています。
<ph type="x-smartling-placeholder"></ph> PNG ソース
<ph type="x-smartling-placeholder"></ph> JPEG と WebP を比較した著者によるブログ投稿。ネズミ カーソルを合わせると例がアクティブになります。
3 「Parkrun」のフレーム 10シーケンス
画像プロデューサー: Lars Haglund、SVT Sveriges Television AB
プロデューサーの許可を得て再現されています
<ph type="x-smartling-placeholder"></ph> PNG ソース
4 画像: 「花の中の野生チェリー(Prunus avium)」
画像の作成者: Benjamin Gimmel
<ph type="x-smartling-placeholder"></ph> PNG ソース
写真は クリエイティブ・コモンズ Attribution-Share Alike 3.0 Unported ライセンスが必要です。
5 画像: 火で呼吸する「ジャイプル マハラジャ ブラスバンド」シャセピエール(ベルギー)
作成者: Luc Viatour
<ph type="x-smartling-placeholder"></ph> PNG ソース
写真は クリエイティブ・コモンズ Attribution-Share Alike 3.0 Unported ライセンスが必要です。
著者のウェブサイト(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 サムネイルも 26% 小さくなっています。 JPEG の同等の性能と比較します