【WordPress】画像を「Webp」に変換する方法をマスターしよう!

Webpを使って サイトを「速く」「軽く」しよう!_2 _ アイキャッチ画像 ブログ

サイト運営で、画像を使うことが多いですが、
画像を使用すると、ページの表示速度や動きが遅くなるんですよね。

ページの表示速度が下がると、

・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」という項目を選択します。

プラグインメニュー以降までの手順 - 画像

画像のように設定からEWWW Image Optimizerプラグインの設定画面に移動できます。

手順② 必要な部分にチェックを入れる

設定画面に移動したら、いくつかチェック項目があります。

WebP設定 - チェック項目 - 設定の画像

画像の①の部分は「今は無料モードのままにする」をチェックし、
画像の②の部分に「メタデータを削除」をチェックします。

画像③の部分、WebPの変換にチェックし、コードがでてきた次のステップへ。

コードが出てこない場合は、画面を下にスクロールさせ「変更を保存」を押すと、コードが出てきます。

手順③ コードを.htaccessファイルにコピペ

WebP htaccessコードコピペが画像

このコードは「.htaccess」というファイルにコピペする必要があります。

サーバーによって、設定方法が変わりますが、

ロリポップは「FTP」という機能があるので、そこから「.htaccess」ファイルを探しコピペする。

エックスサーバーは、サーバーパネルに移動し「.htaccessを編集」を選択し、コピペします。

注意しなければならないのが、

「.htaccess」ファイルは、とてもデリケートで、

少しでもコードが間違っていると、サイトがエラーになり開けなくなるので、すでに書いて
あるコードを削除したりしないでください。

コードをコピペするだけにしてね!
バックアップを取るのもあり!

.htaccessファイルにコピペして、サイトにエラーが出た場合は、
コピペしたコードを削除してください。

※作業などの不具合は自己責任になります。

手順④ 赤い部分が緑になれば完了

webp切り替え完了!の画像

最後に、画像にある枠内の「PNG」という部分が、
緑の背景で「WEBP」となれば、WebPの設定が完了します。

画像では「緑の背景にWEBP」となっていますが、

「赤い背景にPNG」ではWebPに対応してないので、注意してください。

WebPを導入にする上での2つの注意点

Webpは、高い圧縮率で画像を圧縮できるため、
ページ速度が速くなったりとメリットがあります。

しかし、WebPを扱うには「.htaccess(ドットエイチティーアクセス)」というファイルをいじる必要があるのです。

.htaccessをいじるときに記述ミスをしないこと

.htaccessは、

このファイルは、記述を間違えたりすると、

管理者・閲覧者に問わず、サイトの閲覧ができなくなります。

せっかく作ったのに
水の泡ではないか……

そうなると、一度リセットしてやり直すか、
.htaccessファイルの該当箇所の修正、などが必要になります。

大体は、修正で済む場合が多いですが、

サーバーによってはエラーを起こしやすいので、(エックスサーバーなど)
WebPを導入するには、データのバックアップを取ってからにしてください。

※作業などの不具合は自己責任になります。

リライトルールで挿入は絶対にしない

WebP注意点

また、「リライトルールを挿入」を押すと、

.htaccess同様にアクセス不可能になる可能性があるので、

押さないようにしましょう。

リライトルールの挿入をすると、修正ができなくなるケースがあります。

.htaccessでは、収益ができる可能性がありますが、

リライトルールの挿入でエラーになった場合の方がリスクが高いです。

必ず、コードをコピペして記述するようにしてください。

※作業などの不具合は自己責任になります。

すでにある画像をWebPに変換する方法

画像をWebPに変換する方法を紹介しましたが、
実はまだこの状態では、いままでの画像はWebPに変換されていません。

なので、すべての画像をWebPに変換する方法を紹介します。

2ステップで出来るので、とても簡単です。

メディアの一括最適化を選ぶから変更

画面右の「メディア」にカーソルを合わせると
「一括最適化」という項目が出てきます。

WebPに変換するための一括最適化

そうすると、次のような画面になります。

WebPのみにチェックを入れスキャンをする

元画像をWebPに変換

画像にある枠にある「WebPのみ」と、
必要に応じて「再最適化を強制」の項目にチェックを入れます。

チェックを入れてスキャンをすればWebPに変換ができます。

ただし、画像の量によって多少は作用しますが、
かなり時間がかかるので、時間があるときに「WebP変換」をすることをおすすめします。

画像はWebPに変換して使うべし!

Webpはインターネットエクスプローラーなど、
対応していないブラウザは若干ありますが、現在使われているほとんどのブラウザで使えます。

しかし!

Webpに対応していないブラウザには、Webp以外の写真を表示すればいいので問題ありません!

Webpは画像が通常より圧縮されるので

ページの表示速度が向上しやすくなるなど、メリットが多いです。

ページの表示速度を少しでも改善してみたいなら、
画像はWebPに圧縮して使うのが良いでしょう!!

WebPEWWW Image Optimizerプラグインで簡単に実装できるので、

これから画像を使う際は「WebPに変換」してから使う様にしましょう。

【再度注意!】再度になりますが、WebPを導入する際には、
バックアップをとることを推奨します。

画像をWebpに変換したら気になるのはページの表示速度……ですよね?

ページの表示速度を簡単に計測できるGoogle chromeの拡張機能があります!

詳しくはこちら
→ 【使い方紹介】「Lighthouse」を使ってサイトの速度を測ろう!

【画像解説】ページの速度を測れる「Lighthouse」の使い方を紹介
サイト・ページの速度を計測したいときは「Lighthouse」を使うと簡単にサイトの表示速度を測ることができます。 Lighthouseはたった数ステップで導入できて便利なツールなので、簡単に使うことができて便利なツールです。 この記事はLighthouseの使い方と導入方法を紹介します!

オープンケージの最新テーマ「STORK19」

コスパがいいことでおなじみの
「アルバトロス」などを販売しているオープンケージから、待望の最新テーマが発売。
様々な機能が追加され、進化を遂げた「STORK19」は、上級者にはもちろん初心者でも使えるコスパも操作性もいいテーマです。
手頃な値段で使えるテーマを使ってみては?
価格:11,000円(税込)

ブログ