サイト運営で、画像を使うことが多いですが、
画像を使用すると、ページの表示速度や動きが遅くなるんですよね。
ページの表示速度が下がると、
・SEOの評価に悪影響
・閲覧ユーザーが増えにくくなる
といった、デメリットが生まれてしまいます……
そこで重要なのが「画像圧縮」だ！！
この記事では、WordPressで通常の画像圧縮より
プラグインでさらに圧縮できる「WebP（ウェッピー）」変換する方法を紹介します。
WordPressでWebPに変換する方法
WordPressには画像圧縮できるプラグインは多くありますが、
「WebP」に画像できるプラグインは多くありません。
え！？
じゃあどれを使ったらいいの？
今回は、EWWW Image Optimizerというプラグインで
画像を「WebP」に圧縮する方法を紹介します。
なぜ、このプラグインなのかというと、日本語対応だからです！
手順① EWWW Image Optimizerを導入
まず、プラグインを導入するところから始めります。
プラグインの追加ページの右上にある、
検索窓に「EWWW Image Optimizer」または「EWWW」と入力します。
入力すると、画像のように「EWWW Image Optimizer」プラグインが表示されます。
EWWW Image Optimizerプラグインが表示されたら、有効化を押します。
有効化が完了すると、画像のように「有効」という表示に変わります。
写真では灰色の背景になっているなっ
有効化が完了したら、
画面左にある「設定」から「EWWW Image Optimizer」という項目を選択します。
画像のように設定からEWWW Image Optimizerプラグインの設定画面に移動できます。
手順② 必要な部分にチェックを入れる
設定画面に移動したら、いくつかチェック項目があります。
画像の①の部分は「今は無料モードのままにする」をチェックし、
画像の②の部分に「メタデータを削除」をチェックします。
画像③の部分、WebPの変換にチェックし、コードがでてきた次のステップへ。
コードが出てこない場合は、画面を下にスクロールさせ「変更を保存」を押すと、コードが出てきます。
手順③ コードを.htaccessファイルにコピペ
このコードは「.htaccess」というファイルにコピペする必要があります。
サーバーによって、設定方法が変わりますが、
ロリポップは「FTP」という機能があるので、そこから「.htaccess」ファイルを探しコピペする。
エックスサーバーは、サーバーパネルに移動し「.htaccessを編集」を選択し、コピペします。
注意しなければならないのが、
「.htaccess」ファイルは、とてもデリケートで、
少しでもコードが間違っていると、サイトがエラーになり開けなくなるので、すでに書いて
あるコードを削除したりしないでください。
コードをコピペするだけにしてね！
バックアップを取るのもあり！
.htaccessファイルにコピペして、サイトにエラーが出た場合は、
コピペしたコードを削除してください。
※作業などの不具合は自己責任になります。
手順④ 赤い部分が緑になれば完了
最後に、画像にある枠内の「PNG」という部分が、
緑の背景で「WEBP」となれば、WebPの設定が完了します。
画像では「緑の背景にWEBP」となっていますが、
「赤い背景にPNG」ではWebPに対応してないので、注意してください。
WebPを導入にする上での2つの注意点
Webpは、高い圧縮率で画像を圧縮できるため、
ページ速度が速くなったりとメリットがあります。
しかし、WebPを扱うには「.htaccess（ドットエイチティーアクセス）」というファイルをいじる必要があるのです。
.htaccessをいじるときに記述ミスをしないこと
.htaccessは、
このファイルは、記述を間違えたりすると、
管理者・閲覧者に問わず、サイトの閲覧ができなくなります。
せっかく作ったのに
水の泡ではないか……
そうなると、一度リセットしてやり直すか、
.htaccessファイルの該当箇所の修正、などが必要になります。
大体は、修正で済む場合が多いですが、
サーバーによってはエラーを起こしやすいので、（エックスサーバーなど）
WebPを導入するには、データのバックアップを取ってからにしてください。
※作業などの不具合は自己責任になります。
リライトルールで挿入は絶対にしない
また、「リライトルールを挿入」を押すと、
.htaccess同様にアクセス不可能になる可能性があるので、
押さないようにしましょう。
リライトルールの挿入をすると、修正ができなくなるケースがあります。
.htaccessでは、収益ができる可能性がありますが、
リライトルールの挿入でエラーになった場合の方がリスクが高いです。
必ず、コードをコピペして記述するようにしてください。
※作業などの不具合は自己責任になります。
すでにある画像をWebPに変換する方法
画像をWebPに変換する方法を紹介しましたが、
実はまだこの状態では、いままでの画像はWebPに変換されていません。
なので、すべての画像をWebPに変換する方法を紹介します。
2ステップで出来るので、とても簡単です。
メディアの一括最適化を選ぶから変更
画面右の「メディア」にカーソルを合わせると
「一括最適化」という項目が出てきます。
そうすると、次のような画面になります。
WebPのみにチェックを入れスキャンをする
画像にある枠にある「WebPのみ」と、
必要に応じて「再最適化を強制」の項目にチェックを入れます。
チェックを入れてスキャンをすればWebPに変換ができます。
ただし、画像の量によって多少は作用しますが、
かなり時間がかかるので、時間があるときに「WebP変換」をすることをおすすめします。
画像はWebPに変換して使うべし！
Webpはインターネットエクスプローラーなど、
対応していないブラウザは若干ありますが、現在使われているほとんどのブラウザで使えます。
しかし！
Webpに対応していないブラウザには、Webp以外の写真を表示すればいいので問題ありません！
Webpは画像が通常より圧縮されるので
ページの表示速度が向上しやすくなるなど、メリットが多いです。
ページの表示速度を少しでも改善してみたいなら、
画像はWebPに圧縮して使うのが良いでしょう！！
WebPはEWWW Image Optimizerプラグインで簡単に実装できるので、
これから画像を使う際は「WebPに変換」してから使う様にしましょう。
【再度注意！】再度になりますが、WebPを導入する際には、
バックアップをとることを推奨します。
画像をWebpに変換したら気になるのはページの表示速度……ですよね？
ページの表示速度を簡単に計測できるGoogle chromeの拡張機能があります！
詳しくはこちら
→ 【使い方紹介】「Lighthouse」を使ってサイトの速度を測ろう！
