子階層ヘッダー

― WebPで画像軽量化

2023.07.03

WebPで画像軽量化

WebPとは?

WebP(ウェッピー)とは、Googleが開発した次世代画像フォーマットです。画質の劣化も少なく軽量することが可能です。
以前は対応しているブラウザが少なく普及していませんでしたが、2023年時点では主要ブラウザがWebPに対応しています。
WordPressもバージョン5.8から、WebP画像をメディアライブラリにアップロードすることが可能になりました。

WebPのメリット

Googleは、ページの表示速度も検索結果のランキングに影響することを公表しています。
画像ファイルを軽量化することにより、Webページの表示速度を高速化することが可能です。
WebPを利用すればページの表示速度が速くなり、SEOにおいてもメリットがあります。

WebPのデメリット

JavaScriptを使用したWebアプリケーションでは、WebPの使用判定が出ないことがあります。
WebPに対応しているブラウザも増えていますが、古いブラウザでは対応されていないケースもあります。

画像をWebPに変換する方法

Converter for Media
Wordpressの画像をWebPに変換するプラグイン。
すでにアップロードしている画像も変換してくれます。
WebP未対応のブラウザでは、自動で元の形式(jpgなど)を表示する。

Photoshop
23.2 以降では、「コピーを保存」でWebP形式で保存が可能です。

Squoosh
Googleが開発した画像圧縮ツールで圧縮率の変更なども行えます。

サルワカ道具箱
画質や圧縮率などの細かい指定はできませんが、複数の画像を一括で変換することが可能です。

WebP対応ブラウザの状況

2023年7月の対応ブラウザ状況です。

webp対応ブラウザの状況

WebP対応ブラウザ状況

WebP非対応のブラウザ対策

pictureタグを使用することで、webpに対応していないブラウザにはimgタグに記述した画像が表示されます。