今回は次世代フォーマットでの画像配信のために、実際に次世代フォーマットとされる「WebP、Jpeg2000」の画像を作成し、Jpegでの保存画質とを比較をしてみようと思います。

次世代フォーマット WebP の画質比較 Jpeg2000 と Jpeg

1.Jpeg Quality 80 と各次世代フォーマットの比較

Photoshopにてファイルサイズがほぼ同じとなるような設定で書きだして比較します。また、次世代フォーマットの画像については、全てのブラウザで見られるわけではないので、部分拡大については、いったん次世代フォーマットで書き出した後で、読み込んだ画像の部分を拡大しPNGファイルとしたものを作成し表示させることにします。

1)各ファイルサイズ

  • 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 となります。

2)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変換画像)

3)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対応する方法ともにこのサイトにまとめています。参照してください。

サイトの高速化 写真のWebP化の方法 Photoshop利用

サイトの高速化の方法のひとつに、表示させる写真や画像に次世代フォーマットを利用するというものがあります。次世代フォーマットには…

ワードプレスで WebP を簡単に作成する方法 EWWW Image

WordPress(ワードプレス)初心者向けに、今回はワードプレスで次世代フォーマットでの画像配信を簡単に行う方法、「EWWW Image Optimizer」を用いた方法…

ワードプレス(WordPress)の写真関連情報 画像表示情報

ワードプレスで写真サイトを構築する際に役に立ちそうな設定や情報をまとめています。こちらはワードプレスの写真設定や画像表示に関連する情報の目次ページとしています。なるべく図を用いて簡単に解説するようにしようと思っています。参考にどうぞ。

WebM動画に変換する方法 Internet Friendly Media Encoder

今回は無料のアプリを利用して簡単に 次世代フォーマットの WebM に動画を変換する方法について図解します。「 Internet Friendly Media...

ワードプレスで次世代フォーマットでの画像の配信 WebPの画質比較

PageSpeed Insights でのスピードアップの提案に「次世代フォーマットでの画像の配信」というものがあります。次世代画像フォーマットのうち、今回はGoogleが開発している「...

Pin It on Pinterest