2021年6月にGoogleが導入した「コアウェブバイタル」の対策として、JPEGやPNG、GIFといった既存のものから、次世代画像フォーマット「WebP（ウェッピー）」への変換が推奨されています。
その変換方法のひとつとして、WordPressにアップロードした画像を自動で軽量化してくれるプラグイン「EWWW Image Optimizer」があります。
画像の軽量化はSEO対策の重要項目になりつつあります。
まず、なぜWebPへの変換が必要なのか、既存の画像フォーマットとの違いはどのようなものかをお伝えしつつ、まだ未導入の人に向けて「EWWW Image Optimizer」の設定方法までを詳しく解説していきます。
WebPとは
WebPとは、Google公式の画像フォーマットで、拡張子は「.webp」になります。
特徴としては、圧縮率の高さです。
JPEGと比較して25～34%、PNGと比較して25%の軽量化が可能で、画質の劣化もほぼ感じません。
参考：https://developers.google.com/speed/webp
透過やアニメーションにも対応しており、次世代画像フォーマットとも呼ばれています。
2010年9月にGoogleが発表したフォーマットですが、対応するブラウザが限られていた事からあまり普及が進んでいませんでした。
しかし、2018年頃から各ブラウザでの対応が進み、2020年にはApplaのiOS14やSafariも対応したことで、急速に浸透してきています。
Googleが提供しているコアウェブバイタル計測ツール「PageSpeed Insights」でも、改善項目の一つに「次世代フォーマットでの画像の配信」があり、画像フォーマットをWebPへ変換するよう進めていることがわかります。
なお、旧式の「IE（インターネット・エクスプローラー」のブラウザだけがまだWebPに対応していませんが、EWWW Image OptimizerではWebPに対応していないブラウザを判別し表示する画像を自動で調整してくれます。
EWWW Image Optimizerとは
「EWWW Image Optimizer」は、WordPressにアップロードした画像を自動で圧縮・リサイズしてくれるプラグインになります。
すでにアップロード済みの画像はもちろん、新たにアップロードした画像も自動で軽量化してくれます。
また、画像圧縮には画質が荒くなるというイメージが強くありますが、画質をあまり劣化させることなく圧縮できるという点もEWWW Image Optimizerの特徴です。
無料版と有料版があり、その違いは無料版の圧縮方法がロスレス圧縮（元の状態に戻せる圧縮方法）なのに対し、有料版はロッシー圧縮（元の状態には戻せない圧縮方法）になります。
ロッシー圧縮だと圧縮率が更に上がるものの、その分画質が劣化するといった問題もありますので、基本的には無料版で問題ありません。
EWWW Image Optimizerの設定方法
それでは、EWWW Image Optimizerをインストールして設定をしていきましょう。
すでにEWWW Image Optimizerをインストールしている人は、「WebP変換の初期設定」からご覧ください。
EWWW Image Optimizerのインストール方法
まずはWordPressにEWWW Image Optimizerをインストールしましょう。
WordPress管理画面の左メニュー「プラグイン」の内の「新規追加」をクリックします。
右上に「プラグインの検索」というテキストボックスが出てきますので、「EWWW」と入力してください。
検索結果が出てきたら「EWWW Image Optimizer」を確認し、「今すぐインストール」をクリックしましょう。
なお、上記画像の青枠部分のように、検索結果に「使用中のWPバージョンと互換性あり」と表示されているかどうかを確認してください。
「使用中のWordPressバージョンで未検証」と表示されている場合、バージョンの違いによる不具合が出る可能性があります。
WordPressのバージョンを変更するなどして、互換性がある状態にしてから使用するようにしましょう。
インストールが完了すると「有効化」のボタンが出てきますので、クリックしてください。
その後画面がプラグインの一覧に切り替わりますので、EWWW Image Optimizerの「設定」のリンクをクリックし初期設定をすすめていきましょう。
EWWW Image Optimizerの初期設定
上記画面が出てきたら「サイトを高速化」と「保存スペースを節約」にチェックを入れ、「今は無料モードのままにする」を選択して「次」を押しましょう。
なお、「Activate 5x more optimization and priority support」とは5倍速で最適化できる有料プランのことを指していますので、使用したい場合はこちらを選択してください。
画面が切り替わった先で設定する項目が上図の通りになっています。
こちらでは「メタデータを削除」にチェックを入れ、「幅の上限」の設定を行います。
設定は後からでも変更できますので、暫定的に設定しておいても大丈夫です。
その他の項目はご利用の状況によりチェックの有無が変わってきます。
それぞれの内容についても解説していきますので、下記を参考に必要なものを設定していってください。
メタデータの削除
メタデータとは、画像に記録されている場所や作成日、保存場所などの情報の事になります。
スマートフォンで撮影した写真は位置情報などプライバシーに関わるデータが含まれていることもありますし、またこれらのデータを削除することでファイルのサイズを小さくできますので、削除しておくのがおすすめです。
遅延読み込み
遅延読み込みとは、ページを開いた時に全ての情報を一気に取得するのではなく、画面をスクロールしてブラウザに表示された箇所だけ情報を読み込む機能のことです。
全ての情報を一気に読み込もうとすると表示に時間がかかりますが、ブラウザの表示に合わせて都度画像を読み込むことでページの表示速度を早めることが可能になります。
なお、WordPress5.5以降は、この機能が標準で搭載されておりEWWW Image Optimizerで設定しなくても問題はありません。
また、利用中のテーマ側でも遅延読み込みが設定されている場合があり、テーマとEWWW Image Optimizerで設定が重複すると不具合が出ることがありますので、事前に確認しておきましょう。
WebP変換
画像のフォーマットをWebPに変換するのであれば、チェックを入れます。
後ほど詳しく説明しますが、別途必要な作業もありますので、一旦チェックは入れずに後から設定するのがおすすめです。
幅の上限、高さの上限
任意の数字を設定すると、自動でリサイズしてくれる機能になります。
デフォルトでは1920pxの設定がされていますが、作成するページの最大横幅に合わせると無駄な容量が省けて軽量化に繋がります。
ブログ画像としてよく使われるサイズは「1024px」ですが、1024pxの設定で保存しようとすると「有効な値を入力してください。有効な値として最も近いのは1020と1030です。」というアラートが出ますので、どちらかの数字を入力しておきましょう。
なお、高さは「0」にしておくと、縦横比を変えずに自動でリサイズされます。
埋め込みヘルプ
EWWW Image Optimizerの設定画面にヘルプのボタンを表示したい場合はチェックを入れます。
こちらも後から表示させないようにできますので、最初はチェックを入れておき、使わないようでしたら、非表示の設定に切り替えるのが良いでしょう。
匿名の報告
匿名化された使用状況をデータで送信してもいいかどうかの選択になります。
画像の軽量化には関係しませんので、チェックを入れるかどうかはどちらでも問題ありません。
設定が完了すると下記画像が表示されます。
これで初期設定は完了です。
WebP変換に関する設定
次はWebPへ変換する設定を行っていきましょう。
左メニューの「プラグイン」内の「インストール済みプラグイン」をクリックし、プラグインの一覧からEWWW Image Optimizerの「設定」をクリックしてください。
最初は「基本」のタブが表示されると思われますので、こちらのページ下部にある「WebP変換」において、下図の項目にチェックを入れてください。
すると、「WebP の配信方法」という項目が新たに表示されますので「リライトルールを挿入する」ボタンを押し変更を保存しましょう。
「WebPルールが正常に検証されました」という表示が出て、PNGのマークがWEBPになれば、設定は完了です。
では、確認のために、メディアライブラリへ画像をアップロードしてみましょう。
一覧に下図のような「WebP」と記載があれば、画像がWebP化されています。
「リライトルールを挿入する」を押しても設定がうまくいかない場合
もし、「リライトルールを挿入する」を押しても緑のWEBPマークにならない場合は、表示されたコードを「.htaccess」というファイルにコピーして貼り付けてください。
.htaccessはご利用のレンタルサーバーの管理画面、またはFTPでサーバーからダウンロードしてください。
コピーしたコードは.htaccessの一番上に挿入すれば問題はありません。
コードの追加が完了したら、再度EWWW Image Optimizerの設定画面を更新してください。
WebPの配信方法が「WebPルールが正常に検証されました」となり、緑のアイコンが表示されていたら成功です。
アップロード済みの画像を一括でWebPに変換
では、WordPressにアップロード済みの画像をWebPに変換していきます。
管理画面の「メディア」から「一括最適化」を選択してください。
下図の画面になったら、右のチェックボックスは何も選択せず、「最適化されていない画像をスキャンする」をクリックしてください。
圧縮およびWebP化されていない画像がスキャンされて、次のような表示が出てきます。
「◯◯点の画像を最適化」ボタンを押して最適化を実行します。
最適化が始まると、下図のように作業ログが流れていきます。
この間はWordPressの画面を切り替えると、変換作業が中断されてしまうので、注意してください。
全てが最適化済みとなったら、圧縮とWebP化が完了となります。
サイト上で反映されているか確認する
実際にサイト上で公開している画像がWebPに変換されているか確認しましょう。
ChromeでWebPに変換した画像があるページを開き、キーボードの「F12」を押してデベロッパーツールを開きます。
上部メニューの「Network」から「Img」を選択しましょう。
Name欄の、拡張子がjpgやpngのTypeが「webp」になっていれば変換成功です。
また、画像を右クリックし「名前を付けて保存」を選択してみてください。
この際に拡張子が「.webp」、ファイルの種類が「WEBPファイル」になっていたら成功です。
WebPの導入はなるべく早めに
検索順位の評価項目にサイトの表示スピードが導入されたことで、データの軽量化というのも重要視されるようになってきました。
中でもWebPへの変換はGoogleが「改善できる項目」として提案していることですので、SEO対策としても効果的であると考えられるでしょう。
「EWWW Image Optimizer」を利用すれば簡単にWebPへ変換することが可能ですので、まだWebPを導入していない人は、本記事を参考に進めてみてください。
最近のコメント
コメントなし