このギャラリーの内容
このギャラリー ページは、Google Chrome、Opera など、WebP をサポートするブラウザで表示することをおすすめします。
Google Chrome にアクセスできない場合は、ローカル ドライブに画像をダウンロードして、WebP をサポートする他のサービスで使用できます。
JPEG、WebP 、PNG ソースの画像ファイルのサンプル
次の表は、比較のために拡大縮小された JPEG(左側)と WebP 画像(右側)を並べて示しています。WebP をネイティブでサポートするブラウザは存在するため、起動時に行ったように、PNG コンテナに WebP 画像を配置することはなくなりました。画像ファイルのサイズは厳密です。JPEG と WebP のサムネイルをクリックすると、大きな画像が新しいタブで開きます。
サムネイルの下のファイルサイズは、サムネイルをクリックしたときに表示される画像のファイルサイズに対応します。WebP 画像は JPEG 画像と比べて 30% 以上小さくなっています。
JPEG | WebP |
---|---|
&Norrøyfjorden, Norway - 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」シーケンスのフレーム 10 シーケンス 3 | |
![]() JPEG ファイルサイズ: 297.05 KB |
![]() WebP ファイルサイズ: 198.38 KB |
画像: 「花の野生の桜」(イチゴ)4 | |
![]() JPEG ファイルサイズ: 251.03 KB |
![]() WebP ファイルサイズ: 172.82 KB |
画像: ファイヤー 呼吸 &ジャイプル マハラジャ ブラスベルト&チャッタピエール ベルギー 5 | |
![]() JPEG ファイルサイズ: 120.78 KB |
![]() WebP ファイルサイズ: 80.76 KB |
画像クレジット
このページの画像は、さまざまな提供元からのものです。WebP の素晴らしさを伝えるために、魅力的で豊かな写真を選択しています。 残念ながら、圧縮比較を行うときによく使われる Lena や Baboon などの有名なクラシック画像には、著作権がありません。
上の画像のクレジットを以下に示します。
1 |
&Norrøyfjorden, Norway - Breiskrednosi より。ユネスコ世界遺産 画像作成者: Kjetil Birkeland Moe 作成者の許可なく複製 PNG ソース JPEG と WebP の比較に関する著者によるブログ投稿。マウスカーソルを合わせるとサンプルが有効になります。 |
2 |
"Kayaker at Ekstremsportveko 2010, Voss" 画像作成者: Kjetil Birkeland Moe 作成者の許可なく複製 PNG ソース JPEG と WebP の比較に関する著者によるブログ投稿。マウスカーソルを合わせるとサンプルが有効になります。 |
3 | 「Parkrun」& |
4 |
画像: 「花を咲かせる野生の桜」(Prunus avium) 画像の作成者: Benjamin Gimmel PNG ソース クリエイティブ・コモンズライセンス / 帰属 3.0 非移行ライセンスに基づいてライセンス付与された写真 |
5 |
画像: 「Fire 呼吸」&「Jaipur Maharaja Brass Band」 著者のウェブサイト(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% 小さくなっています。