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)の写真関連情報 画像表示情報

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

image-quality-test-imagick-logo

ImageMagick の設定方法と写真画質比較

さくらのレンタルサーバーを使い WordPress(ワードプレス)のクイックインストールを行うと、標準で ImageMagick Engine...

ワードプレス無料ギャラリー Robo Gallery 設定と機能

Wordpress(ワードプレス)の無料ギャラリープラグインにはいろいろありますが、Robo Gallery...

ワードプレスの素敵なギャラリー Unite Gallery にできること

今回はWordpress(ワードプレス)のギャラリープラグイン「Unite Gallery」について図解説したいと思います。Unite Gallery には無料の「Unite Galley...
photo-gallery-top5-logo-01

表示の綺麗な写真ギャラリー 無料プラグイン Top 5 2019 ワードプレス

今回は2019年春現在で、WordPress(ワードプレス)の無料の写真ギャラリープラグインのうちから、表示が綺麗で設定管理の簡単なプラグインを5つご紹介します。全てレスポンシブ対応のギャラリーを作成...

Pin It on Pinterest