※ 当サイトではアフィリエイト広告を利用しています

WordPress

そろそろ「WebP」化しなきゃと思ったら|プラグインを使えば簡単です

そろそろ「WebP」化しなきゃと思ったら|プラグインを使えば簡単です
ブログで使用している画像をWebP形式に変えたいんだけど、どうやったらいいの?

本日はこんなお悩みを解決します。

 

2020年にGoogleが発表した「コアウェブバイタル」。今後、Googleでの検索順位を決定するための評価基準になっているものです。

この中で、サイトの読み込み速度についても触れられており、今後はブログ内で使用する画像は「軽いが正義」となる傾向にあります。

そこで、「画質が綺麗なくせに表示速度が速い」とウワサの次世代型の画像フォーマット「WebP」が注目されているというわけです。

 

本記事では「そろそろWebP化しなきゃ」と思っている方にWordPressプラグイン「EWWW Image Optimizer」を使った方法を解説します。

 

✔本記事を書いた人

profile

ucozi(@ucozi_ikeda

この記事を書いている私は、ヨガスクールで宣伝部長として働いています。

仕事を通じて得た情報をもとに、信頼性の高い記事をお届けしています。

>> さらに詳しいプロフィールはこちら

 

WebP(ウェッピー)とは?

WebP(ウェッピー)とは「次世代画像フォーマット」と呼ばれている画像形式。今まで主流だったJPEGやPNGよりもファイルサイズを小さくできるとして注目されています。こちらは、Googleが開発しました。

 

WebP 最大の特徴は、「画質綺麗なのに軽い」ということ。Google によると、 PNG に比べ26%軽く、 JPG より25〜34%軽くなるとのことです。Web サイトを軽くする最も効果的な方法は画像の軽量化ですから、この数字インパクトは相当です。

 

Googleの「PageSpeed Insights」を使用したことがあるなら知っている人も多いでしょうが、WebP画像を利用していないと「次世代フォーマットでの画像の配信」を利用するよう促がされると思います。

つまり、WebP化しておかないと、今後はGoogleの定める評価基準に満たないことになるので、SEO的にもよろしくないということ。このWebP形式に簡単に変更できるのが、プラグイン「EWWW Image Optimizer」です。

 

EWWW Image Optimizer とは?

「EWWW Image Optimizer」は、画像を自動で圧縮してくれる便利なWordPressプラグインです。

 

特徴をまとめると以下のとおり

  • 画像を圧縮してファイルサイズを縮小する
  • サイト内が軽くなり表示速度が上がる
  • 読み込みが速くなり不要な離脱を減らす

 

ちなみに、WebPの設定には「.htaccess」の設定も必要となります。設定レベルとしては応用編になるので、初心者の方はWebP設定しなくてもOK。基本設定だけでも十分に画像の圧縮効果を得られます。

 

EWWW Image Optimizer のインストール

まだ、「EWWW Image Optimizer」をインストールしてない方はインストールから始めましょう。

手順は以下のとおり。

 

step
1
プラグインに移動

WordPressにログインして、左メニューから「プラグイン」>「新規追加」をクリック。

WordPressにログインして、左メニューから「プラグイン」>「新規追加」をクリック。

 

step
2
「EWWW Image Optimizer」を絞り込み

右上の検索窓に「EWWW Image Optimizer」と入力して絞り込みます。

検索窓に「EWWW Image Optimizer」と入力

 

step
3
インストールを実行

「今すぐインストール」をクリック。

「今すぐインストール」をクリック

 

step
4
有効化を実行

インストールが完了したら「有効化」をクリックします。

ンストールが完了したら「有効化」をクリック

 

左メニューの「設定」内に、新たに「EWWW Image Optimizer」が加わっています。

こちらをクリックして設定画面を開きます。

新たに「EWWW Image Optimizer」が加わっています

 

EWWW Image Optimizer の設定

設定画面を開いたら、下の方に今回の目的である「WebP変換」の項目があるのでチェックします。

「WebP変換」の項目があるのでチェック

 

チェックをすると、自動で JPEG や PNG の画像から WebP 画像を生成してくれます。

ただし、チェックをしたただけでは WebP 画像の配信は行われません。もうひと手間として、サーバー側の設定が必要です

サーバー側の設定前では、赤色で「PNG」と表示されています。

 

「.htaccess」を設定

「WebP変換」にチェックを入れ、いったん「保存」をクリックすると、コードが表示されるようになります。

このコードを「サーバー」の「.htaccess」に追記します。

 

設定方法は使用しているサーバーによって異なるので、ご自身のサーバーの「Q&A」などで調べましょう。

ちなみに、本ブログで使用している「mixhost(ミックスホスト)」については、こちらで詳しく解説されています。

≫ 参考:mixhostヘルプページ「.htaccessの利用について」

 

正常に設定が完了すると、先ほどの設定画面の赤色表示の「PNG」が緑色の「WebP」に変っているはずです。

「PNG」が緑色の「WebP」に変っている

 

「.htaccess」では、僕らの知らないところで「アクセスしたユーザーが WebP 対応ブラウザで、且つ WebP 画像が用意されていれば表示する」という働きをしてくれています。
うこじ
うこじ

 

一括最適化でWebP画像を生成

既にアップ済みの画像をWebP画像に変換するには、もうひと手間必要です。

 

step
1
一括最適化をクリック

WordPressに戻り、左メニューから「メディア」>「一括最適化」をクリック。

「メディア」>「一括最適化」をクリック

 

step
2
画像をスキャン

「再最適化を強制」と「WebPのみ」に チェックを入れて「最適化されていない画像をスキャンする」を実行します。

「再最適化を強制」と「WebPのみ」に チェック

 

WebP変換されていない画像が抽出されるので「画像の最適化」をクリックします。

「画像の最適化」をクリック

 

ちなみに、画像点数が多いとかなりの時間がかかるので、時間があるときに行うことをおすすめします。僕の場合は 6,755点が最適か候補としてピックアップされました。
うこじ
うこじ

 

WebPで配信されているかを確認する

確認方法は簡単。ブログ内の画像を「右クリック」して「名前を付けて画像を保存」を選択。

 

URLの末尾が「.webp」になっていればOKです。

※WebP画像になっていない場合はキャッシュが残っている可能性があるのでクリアしてから、再度チャレンジしてみてください。

URLの末尾が「.webp」になっていればOK

 

まとめ:プラグインを使えばカンタンです

WordPressで記事を投稿を続けていくと、いずれ問題として浮かび上がってくるのが画像データの問題。

使用している画像が多くなるほどサイト読み込みに時間がかかり、表示速度を低下させてしまいます。

 

サイトの表示速度が落ちるとGoogleの評価が下がることはもちろん、ユーザビリティとしても低いので、読者の離脱につながります。

プラグイン「EWWW Image Optimizer」を使えばそれほど難しくないので、このタイミングでWebP化に切り替えてしまいましょう。

 

本日は以上です。

本記事がどなたかのお役に立てたら嬉しいです。

最後までお読みいただき、ありがとうございました。

 

  • この記事を書いた人
この記事を書いた人

ucozi(うこじ)

ヨガスクールの中の人。WEB集客のほか、ヨガ情報サイトの企画・立ち上げやWEBライター養成講座などのコース開発を行ってます。 本ブログは「ヨガインストラクターのためのブログの始め方」をメインテーマに、ヨガ関連情報を発信しています。

-WordPress
-