WordPressの画像をWebP(ウェッピー)に変換するプラグイン

Webpに変換

Webサイトの表示速度を上げるため、画像をGoogleが推奨している画像形式「WebP(ウェッピー)」へ変換しました。初めて聞いた時はチャッピーみたいな響きでカワイイ♪(^^)と思ったものです。

平たくいうと、画質を下げずにファイルサイズを小さくしてくれるという画像形式です。

前々から気になっていたのですが、Webp非対応だったInternet Explorerがサポート終了になったのもあり、積極的に導入してます。表示速度は小さな影響ですが、ユーザーの離脱率にも大きく関係して検索エンジンの順位にも影響が出てくるためです。

今回使用したのは「WebP Converter for Media」というプラグインです。これを使えば既存のJPGやPNG画像も、これからアップロードする画像もWebPに変換してくれます。

WebP Converter for Mediaプラグインの使い方

WordPress管理画面左メニューの「プラグイン」→「新規追加」→右上の検索窓から「WebP Converter for Media」と入力すると、該当のプラグインが出てくるので「インストール」ボタンを押します。

WebP Converter for Mediaをインストール

インストールしたら「有効化」をクリック。

有効化

「プラグイン」→「Settings」をクリックして設定する。

Settings

設定をしていきます。画像は/upload内に入るので、基本的にはほとんどそのままで良いです。/themes内にも画像をたくさん入れているようならチェックを入れます。私は入れませんでした。

「GD」を選択します。

GD

画質を選びます。85%のままで良いです。もっと容量を圧縮したければ、パーセントを下げます。下げるほどファイルサイズが小さくなりますが、画像が劣化していきます。

85パーセント

設定を変えたら「Save Changes」を押して保存します。

SaveChanges

「Force convent all images again」を右へチェックを入れて、「Regenerate All」で画像をWebpに変換します。

Regenerate All

しばらく待っていると、表示が100%になれば完了です。

Webpに変換完了

ブラウザで表示を確認する

画像がWebpに変換されたかどうか確認します。GoogleChromeブラウザでWebサイトを表示して、右クリックから「検証」を押すとソースコードが色々表示されます。
上部の「Network」を押すと、下のTypeの欄に「Webp」に画像が変換されたのが分かります。

Webpに変換された

動きをつけているGif画像はWebpに変換はできないのでそのままです。

実際の表示速度をチェックしてみる

Googleが提供している「PageSpeed Insights」でホームページのアドレスを入力して実際のページの表示速度をチェックしてみます。

以下はWebpに変換する前。

速度テスト前

Webp変換後。特にモバイルの表示速度が上がりました!

速度テスト後

「次世代フォーマットでの画像の配信」の項目がWebpに変換すると無くなりました。

次世代フォーマットでの画像の配信

まとめ

表示速度による影響は微々たるものですが、ページが表示されるのにモタモタしていたらすぐに離脱されそうですし、速いにこしたことはないですね。

この調子で順次他のサイトもWebpに変えていきます。

[公開日] 2022年8月8日 / [最終更新日] 2022年8月17日 / カテゴリー:WEBマーケティング,WordPress講座


トップ

この記事を書いた人
ポポデザイン

ポポデザイン
西宮市在住のWEBデザイナー・グラフィックデザイナー・マーケター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
FacebookTwitterInstagram

同じカテゴリーの記事