さて、昨日は動画GIFでWebpの実力を測りましたが、今回はPNGで比べてみましょう。
私が、Art of Musical InstrumentのLuteのページで使用ている画像を例にエンコードしてみました。
エンコード前
703,987byte Laute_ZACHARIAS-FISCHER_1755.png
371,047byte Luth(dan-doan)_x_20e.png
577,207byte Luth-(sarod)_AYET-ALI-KHAN_vers1925.png
305,577byte Luth(sitar)_RADHA-KRISHNA-SHARMA-AND-CO_vers1980.png
491,464byte Luth-a-manche-long_x_19thC(Japan).png
エンコード後
57,776 Laute_ZACHARIAS-FISCHER_1755.webp
35,758 Luth(dan-doan)_x_20e.webp
62,330 Luth-(sarod)_AYET-ALI-KHAN_vers1925.webp
35,504 Luth(sitar)_RADHA-KRISHNA-SHARMA-AND-CO_vers1980.webp
58,796 Luth-a-manche-long_x_19thC(Japan).webp
どうでしょう。これで画質の劣化がほとんどないのですから驚きです。なんと画像の大きさは、1割以下です。
勿論、JPEGでも同様に大きさを小さくできますが、画像の劣化は激しく、色合いも実際の絵とだいぶ変わってしまいます。
確かにデコードする時間はPNGよりかかるかもしれませんが、今のスマフォのCPU性能を考えれば、ほぼオンザフライでデコードできるような気がします。
それにしても、時代の進歩は大したものです。
エンコードの画面は、こんな感じです。
実際は、バッチファイルで、一気にエンコードしました。
さて、次は実際にwebに上げるやり方ですが、私はpictureタグを使用しました。
<picture>
<source srcset="Luth(dan-doan)_x_20e.webp" type="image/webp">
<img src="Luth(dan-doan)_x_20e.png">
</picture>pictureタグは、IEではサポートされていないので、IE以外ではwebpをIEではpngを画像として表示できます。
これだと、サイト側は、両方の画像を持つこととなり、一時的に容量が増えますが、やがてj時機を見てwebpだけに置き換えていくようにすればよいでしょう。
そのころには、webpは、画像アプリが標準でサポートする画像になっていると思います。
長くなりましたが、最後にリュートのページをwebpの画像だけで構成しました。
ご覧になって体感していただければと思います。