今回は次世代フォーマットでの画像配信のために、実際に次世代フォーマットとされる「WebP、Jpeg2000」の画像を作成し、Jpegでの保存画質とを比較をしてみようと思います。
次世代フォーマット WebP の画質比較 Jpeg2000 と Jpeg
１．Jpeg Quality 80 と各次世代フォーマットの比較
Photoshopにてファイルサイズがほぼ同じとなるような設定で書きだして比較します。また、次世代フォーマットの画像については、全てのブラウザで見られるわけではないので、部分拡大については、いったん次世代フォーマットで書き出した後で、読み込んだ画像の部分を拡大しPNGファイルとしたものを作成し表示させることにします。
１）各ファイルサイズ
- Jpeg Quality 80 ： 129KB
- Jpeg Quality 35 ： 56.3KB
- Jpeg2000 Quality 65： 124KB
- Jpeg2000 Quality 45： 55.9KB
- WebP Quality 97 ： 125KB
- WebP Quality 90 ： 55.1KB
- WebP Quality 70 ： 23.4KB
基準となる比較画像を Jpeg Quality 80 で作成したときのファイルサイズは 129KB となりました。それに近いファイルサイズとなる設定は Jpeg2000 だと Quality 65 、 WebP だと Quality 97 となります。
２）Jpeg2000 と Jpeg の画質比較
Jpeg2000 は同じファイルサイズで比較した場合、Jpeg よりも画質は綺麗です。ブロックノイズ、モスキートノイズともに少ないです。しかし、ファイルサイズを半分より下げようとすると、ノイズがかなり多くなります。画質を保った状態ではあまりサイズは小さくできない印象です。
(1) Jpeg Quality 80 と Jpeg2000 Quality 65
Jpeg Quality 80 と Jpeg2000 Quality 65 の画質を比較します。
https://websvr.org/wp-content/uploads/2019/05/imagetest_jpeg2000_65a.jpf
左 Jpeg q80 、右 Jpeg2000 q65（PNG変換画像）
(2) Jpeg Quality 35 と Jpeg2000 Quality 45
Jpeg Quality 35 と Jpeg2000 Quality 45 の画質を比較します。
https://websvr.org/wp-content/uploads/2019/05/imagetest_jpeg2000_45.jpf
左 Jpeg q35 、右 Jpeg2000 q45（PNG変換画像）
３）WebPの画質比較
WebPは同じファイルサイズで比較した場合、Jpeg よりも画質は綺麗です。ブロックノイズ、モスキートノイズともに少ないです。Quality 90 でもう半分以下のファイルサイズとなりますが、画質は綺麗なままです。画質を保った状態でかなりファイルサイズを小さくできる印象です。
(1) Jpeg Quality 80 と WebP Quality 97
Jpeg Quality 80 と WebP Quality 97 の画質を比較します。
https://websvr.org/wp-content/uploads/2019/05/imagetest_webp_loss97-1.webp
左 Jpeg q80 、右 WebP q97（PNG変換画像）
(2) Jpeg Quality 35 と WebP Quality 90
Jpeg Quality 35 と WebP Quality 90 の画質を比較します。
https://websvr.org/wp-content/uploads/2019/05/imagetest_webp_loss90.webp
左 Jpeg q35 、右 WebP q90（PNG変換画像）
(3) WebP Quality 97 と Jpeg2000 Quality 65
WebP Quality 97 と Jpeg2000 Quality 65 はほぼ同じファイルサイズです。画質を比較してみましょう。
同じファイルサイズの比較では、比較的ファイルサイズが大きい領域では Jpeg2000 も WebP もかなり綺麗です。どちらがより綺麗かとなると、WebP の方に軍配が上がります。
左 WebP q97 、右 Jpeg2000 q65（PNG変換画像）
(4) WebP Quality 90 と Jpeg2000 Quality 45
WebP Quality 90 と Jpeg2000 Quality 45 はほぼ同じファイルサイズです。画質を比較してみましょう。
ファイルサイズが Jpeg Quality 80 の半分ぐらいの量になってくると、Jpeg2000 と比べて明らかに WebP の方が画質が高く綺麗です。ノイズの量も明らかに WebP の方が少ないです。
左 WebP q90 、右 Jpeg2000 q45（PNG変換画像）
(5) WebP Quality 90 と WebP Quality 70
WebP Quality 90 と WebP Quality 70 の画質を比較します。
WebP は Qulity 70 にしてもかなりの画質を保っています。それでいてファイルサイズは Jpeg 80 の 1/5（18%）です。かなりの圧縮率になります。
https://websvr.org/wp-content/uploads/2019/05/imagetest_webp_loss70.webp
左 WebP q90 と 右 WebP q70（PNG変換画像）
以上のように次世代フォーマットでの画像配信はWebPであれば画質、ファイルサイズともに望ましい結果を得られます。Googleが開発していますが、他のブラウザ（※Firefox 65は対応済み）も今後対応の方向に向かっていますし、そろそろ次世代フォーマットは、WebP に決まってきそうに思われます。対応を考えても良い時期かもしれません。
PhotoshopでWebP画像を作成する方法、ワードプレスへのアップロードでWebP対応する方法ともにこのサイトにまとめています。参照してください。
ワードプレス（WordPress）の写真関連情報 画像表示情報
ワードプレスで写真サイトを構築する際に役に立ちそうな設定や情報をまとめています。こちらはワードプレスの写真設定や画像表示に関連する情報の目次ページとしています。なるべく図を用いて簡単に解説するようにしようと思っています。参考にどうぞ。
