【WordPress】Webサイトの表示速度を向上させるために、画像ファイルを「png」から「WebP」に変換する方法【備忘録】

　WebPについては、ウィキペディアを参照してください。https://ja.wikipedia.org/wiki/WebP

１．速度分析

こちらからできます。PageSpeed Insights

２．プラグイン「EWWW Image Optimizer」の設定

　画像ファイルを「png」から「WebP」に変換するには、プラグイン「EWWW Image Optimizer」を使います。

・新規にアップロードする画像をWebP圧縮するように設定します。

・「.htaccess」の編集が必要になります。

※このコードの意味としては「ブラウザがWebPに対応しているなら画像ファイルをWebPで配信し、非対応なら元のフォーマット（JPEGやPNG）で配信する」

３．「.htaccess」の編集

・Xserverの場合

４．既存画像をWebP圧縮

１）サーバーにある画像をローカルにバックアップ

※バックアップの方法はこちらを参照。
【初めてのWordPress】万が一に備えるサイトのバックアップを取る方法について

２）一括変換

①管理メニューより「メディア」⇒「一括最適化」をクリックします。
②一括最適化の設定画面に切り替わるので「最適化されていない画像をスキャンする」をクリックします。

※ここでトラブル発生※７．を参照

５．手動でWebP変換

　この作業は、力づくなので結構大変です。

・管理メニューより「メディア」⇒「ライブラリ」をクリックします。
・最適化する画像を選択して、「一括最適化」をクリックします。

※ここで、またトラブル発生⇒リストに表示されていない画像があることに気が付きました。※８．を参照

６．WebPに変換できているかの確認

１）「EWWW Image Optimizer」の「WebPタブ」で確認

　WebPへの変換が終わったら「WebPタブ」を再び開いて、右下のボタンが緑色で「WEBP」と表示されていることを確認します。

２）サーバーのUPLOADSフォルダで確認

　画像ファイルの末尾が.webpになっているか確認します。「.png（jpg）」と「.webp」の両方があればOKです。

７．トラブル－１

　一括変換ができなかった。

（原因）
・プラグイン「EWWW Image Optimizer」をインストール済みで、画像の圧縮（WebP変換ではない）を既に実施していたために、初めての圧縮作業（最適化）と判定されなかったようです。

（対策）
・画像ごとに、手動で再最適化を実行します。
・強制的に再最適化します。

８．トラブル－２

　すべての画像ファイルが、WordPressメディアライブラリに存在していないことがわかりました。

（原因）
・画像ファイルをWordPressメディアライブラリを経由しないで、直接アップロードした場合に、サーバーにある画像ファイルが、WordPressメディアライブラリとリンクしないために起こっているようです。

（対策）
・プラグイン「Add From Server」をインストールして、WordPressメディアライブラリにない画像をサーバーからインポートします。

※インポートした画像は、WebP変換されています。

（注意点）
・インポートする画像は、サムネイルを除いたものにします。

-wordpress
-webp, wordpress