WordPressで作成したサイトやブログ続けていると、徐々に使用する画像も増えていきます。
画像ファイルが増えてくるとサイトの表示速度を低下させてしまう可能性があります。
サイトの表示速度が遅くなると、ユーザービリティが下がり訪問者の離脱も増えてしまいます。
訪問者の離脱はサイトの収益にも大きな影響を与えるので、表示速度はとても重要な問題です。
そこで、画像ファイルを圧縮してくれる「EWWW Image Optimizer」というプラグインを使うわけです。
というわけで今回は「EWWW Image Optimizer」の使い方や設定の仕方についてお伝えします。
画像を圧縮してWordPressを軽くしたいときは参考にしてみてくださいね。
※この記事は約8分で読めます。
EWWW Image Optimizerとは
EWWW Image Optimizerとは、画像サイズを圧縮するためのWordPressのプラグインです。
WordPressサイトが重く感じられたり、ページの表示速度が遅くなったときに、「EWWW Image Optimizer」を使って、画像ファイルを圧縮することで表示速度を速くする効果が期待できます。
EWWW Image Optimizerのインストール
EWWW Image Optimizerのインストールは、通常通りWordPressの「プラグインの追加」画面からできます。
１．WordPressの管理画面の左側のメニューの「プラグイン」→「新規作成」をクリック
２．「プラグインの追加」画面が開くので検索窓に「EWWW Image Optimizer」を入力し、表示された「EWWW Image Optimizer」をインストールします。
３．インストールが完了したら「有効化」をクリックします。
次は「EWWW Image Optimizer」の設定をしていきます。
EWWW Image Optimizerの設定
●WordPress（ワードプレス）の管理画面の左がメニューの「設定」→「EWWW Image Optimizer」をクリックします。
●インストールして最初に開くと以下の表示が開きます。
●「サイトの高速化（Speed up your site）」と「保存スペースを節約（Save storage space）」にチェックを入れて、「今は無料モードのままにする（Stick with free mode for now）」を選択して「次へ」をクリックします。
以下のように「サイトの推奨設定」表示が開きます。
上図のようにチェック、入力して「設定を保存」をクリックします。
「メタデータを削除」と「遅延読み込み」にチェックを入れ、「幅の上限」と「高さの上限」は両方とも「０」を入れておきます。
「埋め込みヘルプ」と「匿名の報告」にはチェックを入れないでおきます。
以下は各項目の概要になります。
●メタデータを削除
メタデータとは、画像ファイルの撮影場所や撮影日時、カメラの設定などの情報のことです。メタデータを削除することで表示速度の高速化が期待できるのですが、セキュリティ的にもメタデータは削除しておいた方が無難です。
●遅延読み込み
「遅延読み込み」とは、画像が表示領域に入ったときのみ読み込む機能で、これにより表示速度の改善します。
●幅、高さの上限
「幅、高さの上限」とは、画像の幅と高さのピクセル数の上限を決める機能です。ここで設定してもいいのですが、幅「1024px」が設定できないという情報もあるので、幅「1024px」を設定する場合は一旦幅、高さとも「０」を設定しておきます。※通常設定の画面からは普通に設定できます。
●バックアップオリジナル
バックアップのモードが選べます。バックアップがサーバーに保存される「ローカル」を選択が可能です。画像のバックアップをとる場合は選択します。※クラウドは選択できません。
●埋め込みヘルプ
設定項目に開設を入れるかどうかの設定です。オフでいいと思います。
●匿名の報告
EWWW Image Optimizerに匿名で情報提供する項目です。オフでいいと思います。
●「設定の保存」をクリックすると、一括最適化の画面が表示されますが、後で設定するのでとりあえず「完了」をクリックします。
●以下の通常設定画面が表示されれば、最初の基本設定は完了です。
ここまでの表示は最初に設定画面を開いた時のみ表示されます。次回からは以下のような通常の設定画面が表示されます。
※上の通常設定画面では、前述の幅の上限に「1024px」が設定できるようになるので、「1024px」を設定する人はここで設定します。幅の設定はWordPress環境によって自由に決めることができます。
ちなみに当ブログでは幅「1200px」にしています。高さは「０」に設定することで比率で自動リサイズされるのでそうしています。
WebPへの変換設定
WebPへの変換設定もしておきます。
WebPとは
WebP（ウェッピー）とは、2010年にGoogleが開発した次世代の画像フォーマットで、ファイルサイズが従来の画像フォーマットに比べて25％～30％程度削減できるといわれています。
WebPは、画像の圧縮率が高く表示速度の高速化に有利だということでSEOの観点から利用が推奨されています。
WebPは、圧縮しても画質が落ちにくく、容量が軽いといわれています。
WebPの設定方法
●EWWW Image Optimizerの通常設定画面を下にスクロールし、「WebP変換」の項目の「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」のチェック欄をクリックします。
すると下に「次へ」が出てくるのでクリック。
●すると「WebPの配信方法」が表示されるので、表示されたコードをコピーします。
●表示されたコード部分↓これをコピー。
<IfModule mod_rewrite.c>
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_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp
●コピーしたコードを、使用しているサーバーの「.htaccess」ファイルの一番上に貼り付けます。
※「.htaccessファイル」の場所はレンタルサーバーによって異なります。
mixhostの場合の、コード（先ほどコピーしたWebPの配信用コード）の貼り付け方です。
コピーしたコードを「.htaccess」に貼り付けます。
WordPressの基本設定が終わっていれば「パーマリンクの設定」は終わっているはずですが、もし「パーマリンクの設定」をしていなければ、最初に「パーマリンクの設定」をしておきます。
- WordPressの管理画面（ダッシュボード）で「設定」→「パーマリンク」をクリック。
- 「カスタム構造」にチェックをいれて横の白枠の中に『/%postname%』と入力する。
- 「変更を保存」をクリック。
※パーマリンクは投稿ページのURLを設定するところです。
この設定をすることで今回編集する「.htaccess」ファイルが生成されます。
●mixhostの「cPanel」にログインします。
もしユーザー名とパスワードが分からなければ、mixhostからのメールで
「【mixhost】レンタルサーバーアカウント設定完了のお知らせ」
という件名のメールに記載されているので確認してみましょう。
●次に「ファイル」の項目にある「ファイルマネージャー」のアイコンをクリック。
●表示されたファイルマネージャー画面で右上の「設定」をクリックします。
●基本設定で「非表示ファイルの表示（dotfiles）」と「文字エンコードの検証ダイヤログを無効にする」にチェックを入れて「Save」をクリック。
●左側の「public_html」をクリック。
●右側にファイルが表示されるので、その中から「.htaccess」を探してダブルクリックでダウンロードしておきます。※これは何かトラブルがあった時のためのバックアップ用です。なにもなければ使いません。
●同じ「.htaccess」を右クリックして「Edit」をクリック。
●コードが表示されるので、その1番上の行に先ほどコピーしたWebP配信用コードを貼り付けます。
※元々のコードは消さないように注意しましょう。
●コピペしたら右上の「変更の保存」をクリックして完了です。
「閉じる」をクリックして元の画面に戻ります。
以上で「.htaccess」ファイルの編集は完了です。
●WordPressの管理画面に戻り「変更の保存」をクリックします。
●「WebPルールが正常に検証されました」と表示されたらWebP変換の設定は完了です。※右側の赤い「PNG」のアイコンが緑の「WebP」に変わります。
「.htaccess」がわからないときは
●設定画面の「リライトルールを挿入する」をクリックします。
「リライトルールを挿入する」をクリックすると、自動でWebP配信用コードが「.htaccess」ファイルに入力されます。
WebPが適用されないときは
WebPが適用されないときは、通常設定画面の
- JS WebP リライト
- Picture WebP Rewriting
- 強制 WebP
※「リライトルールを挿入する」の下にあります。
にチェック入れて、「変更を保存」をクリック。
すでにUPしている画像の圧縮
●WordPressの管理画面の左側のメニューの「メディア」→「一括最適化」をクリック。
一括最適化を行った画像は元に戻すことができません。※画像のバックアップをとっておくことをおすすめします。
●一括最適化ページで「最適化されていない画像をスキャンする」をクリック
●スキャンが完了すると「最適化できる画像が○○点あります。」と表示されます。
●「○○点の画像を最適化」をクリック。※一括最適化（圧縮）がスタートします。※一括最適化した画像は元に戻せません。
●「最適化済み」と表示されたら「すでにUPしている画像」の一括最適化は完了です。
こんな時はどうする？
画像が表示されなくなった
「遅延読み込み」のチェックを外して「変更を保存」をクリックします。
WordPressの機能や導入しているテーマなどとの関係で「遅延読み込み」の設定が画像の表示を妨げることがあるようです。
画像ファイルを圧縮「EWWW Image Optimizer」の使い方と設定方法 まとめ
というわけで今回は「画像ファイルを圧縮「EWWW Image Optimizer」の使い方と設定方法」についてお伝えしました。
EWWW Image Optimizerを使うことで画像を自動で圧縮できるので、WordPressサイトの軽量化ができ表示速度も速くなることが期待できます。
WordPressが重いと感じられるようになってきたら画像が圧縮できる「EWWW Image Optimizer」の導入を検討してみましょう。
以上、参考にしていただければ幸いです。
