PageSpeed Insights でのスピードアップの提案に「次世代フォーマットでの画像の配信」というものがあります。次世代画像フォーマットのうち、今回はGoogleが開発している「 WebP 」について利用を可能とし、またその画質の比較を行います。

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

1.ワードプレスのWebP利用方法

WordPress(ワードプレス)で次世代画像フォーマットの WebP を利用するには Mime Type の設定が必要です。

1)WP Add Mime Types を利用しMime Type を設定

プラグインの「WP Add Mime Types」を利用し Mime Type を設定します。

① プラグインをインストールする

ワードプレスのダッシュボードの「プラグイン」>「新規追加」から「 WP Add Mime Types 」と入力し下記を検索します。

インストールし有効化します。

② Mime Type の設定
ワードプレスダッシュボードの「設定」>「Mime Type 設定」をクリックします。

「追加の項目」の枠に「webp = image/webp」と入力し「設定を保存」をクリックします。

Mime Type を設定すると、ワードプレスのメディアの新規追加でアップロードできるようになります。

2)サイトに picture 要素で配置する

Webページに配置するには、メディアライブラリーから普通に追加できますが、普通に画像の追加しては、対応していないWebブラウザでは画像が表示されなくなってしまいます。そこで、picture 要素を使い、下記のように配置します。

<picture> 
<source type="image/webp" srcset="https://websvr.org/wp-content/uploads/2019/05/photoshop-webp09-loss80.webp" width="600">
<img src="https://websvr.org/wp-content/uploads/2019/05/photoshop-webp14.jpg" alt="" class="wp-image-785" width="600">
</picture>

下記のようにどのブラウザからでも切り替えて表示されます。

2.WebP の画質比較

WebPの各Qualityで圧縮した画像を比較します。

1)画像のファイルサイズ

各クオリティによる画像のファイルサイズは下記になっています。ピクセル数は800×800に統一しています。

  • WebP Lossless : 224KB
  • WebP Lossy Quality 100 : 132KB
  • WebP Lossy Quality 80 : 31.3KB
  • WebP Lossy Quality 60 : 22.7KB
  • WebP Lossy Quality 40 : 18.3KB

2)WebPの圧縮クオリティによる画質比較

下記の画像はWebPの画質を比較するので、パソコン版のGoogle Chrome等のWebPに対応したブラウザでご覧ください。

① Lossless と Lossy 100
部分拡大(左 Lossless 、右 Lossy 100 )
② Lossy 100 と Lossy 80
部分拡大(左 Lossy 100 、右 Lossy 80 )
Lossy 80 と Lossy 60
部分拡大(左 Lossy 80 、右 Lossy 60 )
④ Lossy 60 と Lossy 40
部分拡大(左 Lossy 60 、右 Lossy 40 )
Lossy 80 と Lossy 40
部分拡大(左 Lossy 80 、右 Lossy 40 )
⑥ WebP Qulity まとめ

Losslessが当然綺麗ですが、多少ぼやけてはいるもののLossyの80でも十分に綺麗です。それでいてファイルサイズは1/7(14%)程度です。さらにLossyの60でさえまだ綺麗です。ファイルサイズは1/10(10%)程度です。さすがにLossyの40になると、輪郭のボケが厳しくなってきますがファイルサイズは1/12(8.2%)です。

3.Jpeg と WebP の画質比較

各Jpeg画像と WebP Lossy Quality 80 の画像とを比較します。

1)画像のファイルサイズ

各圧縮方法による画像のファイルサイズは下記になっています。ピクセル数は800×800に統一しています。

  • Jpeg GD : 81.0KB
  • Jpeg ImageMagick 80 : 85.0KB
  • Jpeg TinyPNG : 54.4KB
  • WebP Lossy Quality 80 : 31.3KB

各画像のファイルサイズは、WebPのQuality80の画像が一番小さくなっています。そのサイズは、Jpeg GDのによるものの3/8(39%)です。

2)各圧縮方式による画質比較

① Jpeg GD と WebP Lossy Quality 80
部分拡大(左 GD 、右 WebP 80 )
② ImageMagick 80 と WebP Lossy Quality 80
部分拡大(左 ImageMagick 、右 WebP 80 )
③ TinyPNG と WebP Lossy Quality 80
部分拡大(左 TinyPNG 、右 WebP 80 )
④ 各圧縮方式による画質比較まとめ

さすが次世代フォーマット!という結果になりました。どの圧縮方式と比べてもWebPは綺麗です。しかもファイルサイズは一番小さいのです。モスキートノイズが出ないのが良いです。

さすが次世代フォーマット!という結果になりました。どの圧縮方式と比べてもWebPは綺麗です。しかもファイルサイズは一番小さいのです。モスキートノイズが出ないのが良いです。

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

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

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

サイトの高速化の方法のひとつに、表示させる写真や画像に次世代フォーマットを利用するというものがあります。次世代フォーマットにはいくつか案があるのですが、今回はGoogleが開発している...

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

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

簡単綺麗な写真ギャラリー Envira Photo Gallery 2019 ワードプレス

WordPress(ワードプレス)で写真を綺麗に魅せるサイトを作るには、ギャラリープラグインを使うのも有効です。今回は、数あるギャラリープラグインの中から「Gallery Plugin...
WP-Divi-elegant-themes-logo

写真サイトを作るのにワードプレスのDiviがおすすめな理由

今回はワードプレスの「Divi(by Elegant...

Pin It on Pinterest