プラグイン開発・活用

【プラグイン】Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

GoogleのPageSpeed Insightsでサイトの速度を計測した際、「次世代フォーマットでの画像の配信」という赤い警告が出て、スコアが下がってしまっていませんか?

前回の記事では、サイトを重くする過去の巨大画像を「圧縮」して軽量化する方法を解説しました。今回はその「次のステップ」として、さらに劇的な表示速度の改善が見込める「画像のWebP(ウェッピー)化」について解説します。

WebPとは、画質を保ったまま従来のJPEGやPNGよりもファイルサイズを大幅に軽くできる、Google推奨の次世代画像フォーマットです。

WebP化できるプラグインはいくつかありますが、本記事では設定が非常にシンプルで、かつ既存の画像を安全に変換・配信できる専用プラグイン『Convert for Media』を使った確実な手順をご紹介します。

⚠️ 作業前に必ずお読みください

本記事で紹介する画像変換処理は、サーバー内のファイルを操作します。予期せぬエラーやサーバーのタイムアウトに備え、作業前には必ずメディアディレクトリ(/wp-content/uploads/)またはサイト全体のバックアップを取得し、いつでも復元できる状態にしてから実行してください。

「バックアップの取り方が分からない」「自分でやるのは怖い」という方へ

操作を誤ると画像が表示されなくなるリスクがあります。ご自身での作業に少しでも自信がない場合は無理をせず、TEDASKの技術サポートなど、プロへの作業代行をご検討ください。

※本記事の手順をご自身で実行され、万が一データの損失・不具合が生じた場合でも、当サイトおよび筆者は一切の責任を負いかねます。あらかじめご了承ください。

Convert for Mediaのインストールと基本設定

まずはプラグインをインストールしましょう。

Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

WordPress管理画面の「プラグイン」「新規追加」へ移動したら、検索窓にconvertと入れるとConvert for Mediaが表示されるので、インストール→有効化までしてしまいましょう。

Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

有効化すると、プラグインの一覧に移動するのでConvert for mediaの設定をクリックします。

基本設定の確認

設定画面を開くと、いくつか設定項目がありますが、基本的にはデフォルト(初期設定)のままでも十分に機能します。

Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法
Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

  • Next-gen image formats: 「WebP」にチェックが入っていることを確認してください。
  • コンバージョン戦略: 「最適化」が推奨です。画質を保ちつつ最も軽くなります。
  • 対応ディレクトリー: 通常は uploads (画像が保存される場所)にチェックが入っていればOKです。

【実践】過去の画像をすべてWebPに一括変換する

初期設定ができたら、いよいよ既にサイトにある過去の画像をWebPに一括変換していきます。

Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

設定画面の一番下までスクロールすると、画像の一括最適化というセクションがあります。

一括最適化開始ボタンをクリックします。

Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

ポップアップが出たら、「Skip for now」をクリックします。

Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

またポップアップがでるので、「Not now」をクリックします。

Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

変換が始まりました。

画像の枚数が多い場合は数十分かかることもあります。プログレスバーが100%になるまで、ブラウザのタブを閉じずにそのまま待機してください。

Convert for MediaでWordPressサイトをWebP対応させて画像表示を軽くする方法

100%になれば完了です!

ちゃんとWebPで配信されているか確認する方法

一括変換が終わったら、本当に画像がWebPとして配信されているか確認しましょう。

  1. 自分のサイトをブラウザの「シークレットモード」で開きます。
  2. 記事内の適当な画像の上で右クリックをします。
  3. 「新しいタブで画像を開く」を選択します。
  4. 開いたタブのURLバーの末尾(拡張子)を確認してください。

元の画像が .jpg.png であっても、URLの末尾が .webp になっていれば、無事に次世代フォーマットでの配信に成功しています。

まとめ:画像最適化は「圧縮」と「WebP」のセットで

今回は、専用プラグイン「Convert for Media」を使って、サイト内の画像を一括でWebP化する手順を解説しました。

前回の記事でご紹介した「EWWWによる画像圧縮」と、今回の「WebP化」を組み合わせることで、PageSpeed Insightsの画像に関する警告はほとんど解消されるはずです。

表示速度の改善は、SEOだけでなく、訪れたユーザーの閲覧時の快適さやお問い合わせ率に直結する非常に重要な対策です。

もし「ここまでやっても速度が改善しない」「設定が複雑で自分では手に負えない」という場合は、無理をせずプロにご相談ください。

「表示速度の改善」や「サイトの保守管理」、 プロに丸投げしませんか?
  • 画像の最適化やWebP化をプロに安全に代行してほしい
  • PageSpeed Insightsのスコアが赤色で、どこから手をつければいいか分からない
  • 見えないエラーや容量オーバーが怖いので、保守管理をまるっと任せたい

TEDASKでは、WordPressの表示速度改善から、見えない不具合の調査、強固なセキュリティ対策を施した定期保守まで、あなたのビジネスを支えるWEB技術パートナーとして幅広くサポートしています。 「うちのサイト、今のままで大丈夫かな?」と少しでも不安を感じたら、ぜひお気軽にご相談ください!

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ600件以上!WordPressの高度なカスタマイズから、海外製の高機能WordPressテーマの導入支援、LaravelによるWEBサービス制作はお任せ下さい。

Toshi Seitoをフォローする