WebPの画質ってあまり良くないと思う

2021/08/16

WordPressがバージョン5.8でWebPに対応したので、画像はWebPを積極的に使うようにしてきました。しかし、どうも画質が悪い気が。ということで、ファイル保存時の品質を変えて画質の違いを見てみました。

GoogleはWebPがおすすめ

WebPの画質を見ていく前に、まず、おさらい。

PageSpeed InsightsでJPEGやPNGなどを使っていると次世代フォーマットを使えとの指摘がされます。

JPEG 2000、JPEG XR、WebPがその次世代フォーマットってことなんでしょうが、この中でポピュラーなのはWebPではないかと。ところが、WordPress 5.7.xまでは、WebP形式の画像を埋め込もうとするとセキュリティエラーになっていました。

プラグインを使うとか、5.7.xでもやりようはあったのですが、面倒なのでやっていませんでした。しかし、時代の変化なんでしょう、5.8ではWebPの画像も普通にアップロードできるようになりました。そういうわけで、WebPを積極的に使うようになった次第です。

でも、どうも画質がワヤワヤしてしているようで…。ということで、今回の調査を思い立ったわけです。

画質チェック

では、画質を見ていきます。画像形式の変換・保存にはpaint.net(バージョン4.2.16)を使用。

写真(物)

まずは、一般的な写真。

JPEG

品質は95、クロマサブサンプリングは4:2:2で保存したものが下の画像(サイズは800×600ピクセル)。

ファイルサイズは156KB。これを基準とします。

続いて、クロマサブサンプリングを4:2:0にしたもの。

画質の違いは私にはわかりません。ファイルサイズもあまり変らず、141KB。

では、品質を落として85に( クロマサブサンプリング は4:2:0のまま)。

ファイルサイズはほぼ半減して77.9KB。画質の劣化もほぼわかりません。Webに掲載する目的であれば十分な画質じゃないでしょうか?

WebP

では、同じ写真をWebPで保存してみます。

最初は品質50で。特に理由があるわけではなく、開いたらこの設定になっていたので標準的なのかなと。

ファイルサイズは25.5KBとものすごく小さくなりました。しかし、画質はかなりひどいです。全体的にモヤッとしています。雄しべのライン(境界)がグチャグチャになっており、特にわかりやすいと思います。

では、品質を80に上げてみます。

ファイルサイズは38.8KB。これでもかなり小さいです。画質はあまり良くなっていません。

品質をもっと上げてみます。95で。実は、「既定値」のボタンを押したらこの95でした。もしかしたら、WebPは品質95が標準的なのかもしれません。

画質はかなり良くなりました。しかし、ファイルサイズも一気に大きくなって89.0KB。これなら、JEPGの85、4:2:0のファイルサイズ77.9KBの方が小さくていいです。

写真(文字)

続いては、文字が入った写真。文字は物や風景よりも粗さが目立ちやすいと思います。

JPEG

95、4:2:2。ファイルサイズは286KB。

95、4:2:0。ファイルサイズは265KB。

85、4:2:0。ファイルサイズは153KB。

JEPGで品質を落としてみたけれど、案外画質は落ちないようです。

WebP

品質95。ファイルサイズは183KB。

品質80。ファイルサイズは94.2KB。

少しワヤワヤ感があります。色にじみが生じているように見えます。

品質50。ファイルサイズは63.4KB。

全然ダメですね。文字の周りのにじみや色の境界での色転びが結構ひどい。

画面キャプチャ

今度はPCの画面(PageSpeed Insightsの結果)をキャプチャしたもの。PNGとの比較が目的です。

PNG

ファイルサイズは57.7KB。

WebP

事前設定の項目は「描画」を選びました。

品質95。ファイルサイズは45.4KB。

品質95でも文字がぼやけています。

品質80。ファイルサイズは29.6KB。

品質50。ファイルサイズは22.3KB。

文字だけでなく、グラフもかなり品質が落ち、見るに耐えません。

まとめ

ファイルサイズなどを一覧にしておきます。

  • 一般的な写真
ファイルサイズ画質
JPEG 95、4:2:2156KB(基準)
JPEG 95、4:2:0141KB劣化はほとんど感じない
JPEG 85、4:2:077.9KB劣化はほとんど感じない
WebP 9589.0KB劣化はほとんど感じない
WebP 8038.8KB劣化が少し気なる
WebP 5025.5KBかなりひどい
  • 文字の写真
ファイルサイズ画質
JPEG 95、4:2:2286KB(基準)
JPEG 95、4:2:0265KB劣化はほとんど感じない
JPEG 85、4:2:0153KB劣化はほとんど感じない
WebP 95183KB劣化はほとんど感じない
WebP 8094.2KB劣化が少し気なる
WebP 5063.4KBかなりひどい
  • 画面キャプチャ
ファイルサイズ画質
PNG57.7KB(基準)
WebP 9545.4KB文字がぼける
WebP 8029.6KB文字の周りのにじみが目立つ
WebP 5022.3KB見るに堪えない

今回の調査の範囲では、写真でJPEGとWebPとで同程度の画質を求めるならJPEGの方がファイルサイズが小さいという結果です。品質85、 クロマサブサンプリング4:2:0ならWebサイトに掲載する目的の写真なら充分だと思います。WebPでこれと同程度の品質を求めるとWebPの方がファイルサイズが大きくなってしまいます。

画面キャプチャ(色数が少ない画像)ならPNG。こちらもWebPの利点は感じられません。

「WebPにしたらファイルサイズが小さくなった!」と喜んだものの、よく見たら画質が悪くなっているという結果。画質を落とせば、そりゃ、ファイルサイズは小さくなるでしょ…。

WebPの画質について調べていたら、サイバーエージェントの公式エンジニアブログにこちらの記事がありました。

この記事のまとめの一部を引用します。

・高画質で配信したいものはJPEGでもWebPでもファイルサイズに大差ないため、互換性を重視しJPEGで配信する
・そんなに高品質でなくても良い場合は、圧縮率の高いWebPを積極的に使う

今回の私の調査の結果と同じですね。人間、高品質のものに慣れると低品質のものでは満足できないですよね。画像に限らず、一般的な話として(それが向上心とも言えるかと)。こうしてみると、なぜGoogleが「次世代画像フォーマット」をプッシュするのか理由がわかりません。

本題とは関係ありませんが、文字の写真に使ったのは「セメダインスーパーX」のパッケージの裏の説明文です。この接着剤、本当によくつきます。接着剤って色々と種類があって悩みますけど、これなら大抵のものが付けられてものすごく便利です。おすすめ。


JEPG画像の圧縮情報等を調べる方法はこちらの記事。

この記事のタイトルとURLをコピーする

スポンサードリンク