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)の写真関連情報 画像表示情報
ワードプレスで写真サイトを構築する際に役に立ちそうな設定や情報をまとめています。こちらはワードプレスの写真設定や画像表示に関連する情報の目次ページとしています。なるべく図を用いて簡単に解説するようにしようと思っています。参考にどうぞ。
Thhank you fоr another excellent post. Where else could anybody get that type
of info in such a perfect aрproach of writing? I’ve a presentation subsequent week, and I am at the ⅼook for such information.
Thank you for visiting my site.
I created these images. If you install photoshop plug-in and wordpress plug-in, you can do it.
https://websvr.org/matome/site-webp-photoshop/
https://websvr.org/matome/wordpress-compression-comparison-tinypng/
Why viewers still սse to read news paperѕ wһen in this technological world everything iis presenteԀ on net?