徳本です。
ブログの執筆時はSEOのことを考えて、アイキャッチや見出しごとに画像を使用することが推奨されています。
しかしコンテンツの数が増えていくと使用する画像の枚数も多くなり、サイトの表示速度が遅くなってしまいます。
サイト表示速度に影響を及ぼす要素には「画像のファイルサイズ」も含まれるので、ファイルサイズを小さくすれば、表示速度を上げることが可能です。
そこで役立つのが「EWWW Image Optimizer」という、画像圧縮用のプラグインです。
今回はEWWW Image Optimizerの使い方と設定方法を解説します。
◆この記事の目次
EWWW Image Optimizer とは
「EWWW Image Optimizer」とは、画像を劣化させずに圧縮できるWordPress用プラグインのことです。
このEWWW Image Optimizerの特徴は以下の点にあります。
- 導入後にアップロードした画像のファイルサイズを自動的に小さくしてくれる
- 導入前にアップロードした画像のファイルサイズも小さくできる
画像ファイルサイズはWebページの表示速度遅延につながるので、ファイルサイズが小さくなれば、記事の表示速度も向上します。
そして記事の表示速度が上がれば、それだけユーザーの離脱率も低くなるので、EWWW Image Optimizerは記事に画像を多く使用している方ほど積極的に使用していきたいプラグインだと言えるでしょう。
EWWW Image Optimizerをインストールする方法
EWWW Image Optimizerをインストールするには、以下の手順を踏みます。
- WordPress管理画面左側のメニューから、「プラグイン」→「新規追加」を選んでクリック
- 画面右上の検索窓に「EWWW Image Optimizer」と入力
- 検索結果のうち、「cloud」という言葉の付いていないほうをインストールし、「有効化」する
また、インストール後は、「設定」→「EWWW Image Optimizer」を選んで、設定画面を表示し、各種設定に移ります。
EWWW Image Optimizerの設定方法
「EWWW Image Optimizer」の設定画面を表示した後は、以下の2つの点を設定します。
- 画像圧縮に関する設定
- WebP変換設定
画像圧縮に関する設定
まず、ページ上部に3つのタプが表示されている「簡単モード」内の「基本」タブが選択されていることを確認します。
基本タブ内の項目のうち、以下の2つを設定します。
- メタデータを削除
- 画像のリサイズ
「メタデータ」とは、写真撮影の日付や場所などの情報で、特に必要がないので「メタデータを削除」をチェックします。
次に「画像のリサイズ」の項目で幅の上限に780と入力し、過去にアップロードした画像と新規にアップロードする画像が780px以下にリサイズされるようにします。
設定後は「変更を保存」ボタンをクリックし、設定内容を保存した後、画面上部左側の「Enable Ludicrous Mode」をクリックし、「リサイズ」タブをクリックします。
リサイズタブ内の以下の項目をチェックします。
- 既存の画像をリサイズ
- 他の画像をリサイズ
こうすることで、サイト内の全ての画像を適切なサイズにリサイズでき、画像容量を大きく減らすことができます。
こちらも変更後に「変更を保存」ボタンを忘れずにクリックしておきましょう。
WebP変換設定
「WebP」とはGoogle開発の「次世代画像フォーマット」であり、従来のJPGやPNGといった画像フォーマットよりもファイルサイズを削減できます。
今まで対応ブラウザが少なかったものの、現在ではiOS14や、Safariなどにも対応するようになったので、サポートが公式に終了したInternet Explorer以外のほとんどのブラウザで表示可能です。
EWWW Image Optimizerでは、画像を自動的にWebPに変換し、ブラウザの対応状況に応じて表示させる画像形式を変更させられます。
WebP変換設定をするには「基本」タブの「WebP変換」にチェックを入れ、「変更を保存」し、続けて表示される以下のコードをサーバーの.htaccessへと貼り付けます。
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
エックスサーバーの場合は、サーバーパネルの「.htaccess編集」をクリックし、コードを貼り付けた後は「確認画面へ進む」→「実行する」をクリックします。
設定後は画面の右下に緑色の文字で「WEBP」と表示されます。
EWWW Image Optimizerの使い方
EWWW Image Optimizerは、主に以下の2種類の画像圧縮用に使います。
- 新規アップロード画像の圧縮
- 過去にアップロード済み画像の圧縮
新規アップロード画像の圧縮
EWWW Image Optimizerの導入、設定を済ませた後にアップロードした画像は、自動的に圧縮されるようになっています。
WordPressの管理画面から「メディア」→「ライブラリ」を見ると、画像の圧縮率を確認できます。
過去にアップロード済み画像の圧縮
過去にアップロード済みの画像は「メディア」→「一括最適化」で圧縮できます。
一括最適化内の画面では「再最適化を強制」と「WebPのみ」をチェックし、「最適化されていない画像をスキャンする」をクリックします。
するとWebP変換されていない画像のみがスキャンされるので、「～点の画像を最適化」をクリックし、最適化を実行します。
最適化をした後は、記事内の画像にカーソルを合わせて右クリックし、「名前を付けて画像を保存」を押し、保存時のファイル種類が「WebPファイル」になっているかどうかを確認しましょう。
まとめ
今回はWordPressプラグインのEWWW Image Optimizerのインストール、設定方法や使い方について解説しました。
画像ファイルサイズの圧縮や最適化を行い、Webページの表示速度を向上させていきましょう。