WebPは次世代Web用画像（動画）フォーマットと言われていて、オールマイティ画像フォーマットと言われています。
主要ブラウザやスマホ全般で既に対応が完了できているので、使わないと損だとも思いますが、
少し謎な部分があります。
本当に全てのフォーマットの容量が軽くなるのか？
動画は
WebMというフォーマットになるが、GIFアニメーションのようなアニメーション画像にはちゃんと対応できているのか？
などなど、WebPの個人的な疑問について深堀りしてみたいと思います。
画像の容量は軽くなるのか？（カラー編）
気になるフォーマットで変換を行ってみました。
（カラー）JPEG画像の変換
引用:
https://pixabay.com/ja/photos/%E6%B9%96-%E5%B1%B1-%E6%9C%A8-%E3%82%A2%E3%83%AB%E3%83%97%E3%82%B9-%E9%AB%98%E5%B1%B1-5933622/
元画像 : 246KB
WebP(100%) : 336KB
WebP(75%) : 87KB
WebP(50%) : 64KB
WebP(25%) : 39KB
WebP(10%) : 25KB
100%品質だと、ファイル容量は大きくなりますが、品質を少しダウンさせるだけで極端に容量が軽くなっているのがわかります。
変換ツールのデフォルトがどれも75%になっているのは、ほぼ同品質レベルで、容量が２，３割も軽くなるという値なのでしょう。
白黒画像（JPEG)の変換
先程の画像を、グレースケールでJPEGと、PNGとGIF画像でそのまま書き出してみました。
GIF: 702KB
JPEG(90%): 208KB
PNG : 450KB
それぞれのフォーマット特性のため、容量はバラバラです。
WebP変換
一番軽いJPEGをWebPに変換してみます。
WebP(100%) : 272KB
WebP(75%) : 73KB
WebP(50%) : 54KB
WebP(25%) : 33KB
WebP(10%) : 21KB
グレースケールになっても、カラーより少しだけ容量が軽くなりますが、さほど大きな差はないようですね。
256色などの色パレット方式の画像の圧縮ってどうなっているのか？
元画像: 104KB
WebP(100%) : 227KB
WebP(75%) : 54KB
WebP(50%) : 46KB
WebP(25%) : 38KB
WebP(10%) : 33KB
色のヂラつきが目立ちますが、期待通りの容量削減ができています。
アニメーションGIFはWebPに変換できるのか？
元画像: 286KB
WebP(100%) : 767KB
WebP(75%) : 388KB
WebP(50%) : 320KB
WebP(25%) : 241KB
WebP(10%) : 215KB
GIFアニメは、低クオリティにしないと、容量メリットは無さそうですね。
改めてGIFアニメのクオリティの高さが分かります。
WebPの変換について
Cwebp
Googleが配布している変換ツールです。
https://developers.google.com/speed/webp/docs/cwebp
EZ GIF.com
Webブラウザでいろいろな画像フォーマット変換ができます。
※GIFアニメも対応しています。
https://ezgif.com/webp-maker
あとがき
Web系のシステムを作る時、アイコンなどはできるだけSVGフォーマットで作るようにしていますが、画像系は全てWebPにしようか迷っていて、ブログ書くついでに調査をしようと思い立って今回のブログを書きました。
GIFアニメがWebPに変換できるというのは、メリットかも知れませんが、現時点でのMacのFinderプレビュー機能では、アニメーションは再生されないので、ブラウザで表示しないといけないようです。
個人的には、GIFアニメはGIFフォーマットで使うほうがいいかな・・・と思いました。
大きめの写真などは、WebPの高圧縮で使ったほうがかなりの容量メリットがあり事もわかったので、今回の調査はこれにて終了にします。
また気になる調査があれば、ブログで公開したいと思います。
0 件のコメント:
コメントを投稿