この記事ではプラグインEWWW Image Optimizerの設定方法について解説していきます。
EWWW Image Optimizerを使う事で画像を圧縮出来たり、WebPという画像フォーマットを使えるようになりサイトの表示速度がUPします。
サイトの表示速度をUPしたい方は是非参考にしてみて下さい。
この記事のポイントです↓
- EWWW Image Optimizerを使うとブログ内の画像が軽くなる。
- ただし、WordPressに画像を入れる前にTinyPNGなどで手動で圧縮しておくのがおすすめ。
- メディア設定もしっかりしておこう！
じゃ、本文に入っていきますよ！
EWWW Image Optimizerは画像の容量を小さくするプラグイン！
EWWW Image Optimizerで出来る主な事。
EWWW Image Optimizerは端的に言うと、WordPressブログ内の画像容量を小さくするプラグインです。
EWWW Image Optimizerで出来る主な事は
- EWWW Image Optimizer導入前にWordPressに入れた画像の容量を一括で小さくする。
- 導入した後にWordPressに入る画像の容量を自動で小さくする。
- 画像の遅延読み込み。
- 設定すればWebPという画像形式を使えるようになる。
の4つです。
画像圧縮のレベルは4段階だが無料版はピクセルパーフェクトのみ。
ちなみにEWWW Image Optimizerで出来る画像の圧縮レベルは4段階あります。
- ピクセルパーフェクト
- ピクセルパーフェクトプラス
- プレミアム
- プレミアムプラス
無料版だと「ピクセルパーフェクト」しか選択できません。
有料版にしてAPIキーを入力した場合、もっと高い圧縮レベルを選択できるという訳です。
ただし、とりあえずは無料版でOKですし、圧縮レベルについても気にする必要はありません。
（一応、情報としては知っておきましょう、くらいです）
しばらく無料版で試してみて、気に入ったら有料版も検討しましょう。
EWWW Image Optimizerの設定方法（自動で画像を圧縮するように設定）
EWWW Image Optimizerの設定方法を解説していきます。（もちろん無料版である前提の説明です）
ここでは説明の都合上、4ステップに分けていきますね。
- インストールして有効化
- メタデータを削除
- 遅延読み込み
- WebP 変換
とりあえず、これだけやっておけばEWWW Image Optimizerは機能しますので、初心者の方はまずこれをやりましょう。
インストールして有効化
EWWW Image Optimizerをインストールして有効していきましょう！
①ダッシュボード画面左の「プラグイン」→「新規追加」をクリック。
遷移した画面の右上にある欄に「EWWW Image Optimizer」と入力し、検索しましょう。
②EWWW Image Optimizerが出てくるので、インストールし有効化します。
メタデータを削除
ここからEWWW Image Optimizerの本格的な設定に入っていきます。
まずは「メタデータを削除」について設定していきます。
①ダッシュボード画面左の「設定」→「EWWW Image Optimizer」と進みます。
②「基本」タブを選択し、「メタデータを削除」にチェックが入っている事を確認しましょう。
最後に「変更を保存」をしっかり押します。
（「変更を保存」のボタンは画面の下部にあります）
メタデータとは撮影場所や時間、撮影したカメラの情報などの事で別になくても画像は表示されるのでWordPressには特に必要ないです。
例えばスマホで写真を撮ると撮影日時や場所が記録されますが、あれもメタデータです。
遅延読み込み
「基本」タブを選択している状態で、「遅延読み込み」にチェックを入れて「変更を保存」をクリックします。
（「変更を保存」のボタンは画面の下部にあります）
「遅延読み込み」とは画像の遅延読み込みの事です。ブログをブラウザで見た時に、表示されている部分の画像だけを読み込みサイト表示速度をUPさせ、表示されていない部分の画像については後から読み込みます。
※Lazy Loadというプラグインは遅延読み込み機能をブログに実装させるものですが、EWWW Image Optimizerがあれば不要なので気をつけましょう。
WebP 変換
①「基本」タブを選択している状態で、「WebP変換」にチェックを入れて「変更を保存」をクリック。
（「変更を保存」のボタンは画面の下部にあります）
②するとWebPタグのページの下の方に.htaccessファイルに追記するコードが出てきますので、これをコピーして.htaccessファイルの冒頭部分に追記します。
※「リライトルールを挿入する」ボタンをクリックすると、上記コードが自動で.htaccessファイルに追記されますが、不具合が出る事もあるので手動で書き込むのが無難です。
ちなみに僕はテストサイトでこのボタンを押して設定してみましたが、なぜかずっとWebP状態になりませんでした。
③.htaccessファイルはpublic_htmlファイルの中にあります。
FTPソフトを使用し、まず一度現状の.htaccessファイルをダウンロードして別の場所にバックアップとして保存しておいてください。
何を言ってるか分からないという人は、まだ.htaccessファイルをいじるのは早いので止めておきましょう。
今すぐやらなくても大丈夫ですから…
④.htaccessファイルを一旦、PCにダウンロードしてから書き換える場合、もし文字化け委していたら.htaccessファイルを開いているソフト（メモ帳など）の文字コードを確認しましょう。
UTF-8(BOM無し)じゃないと、.htaccessファイルは文字化けしてしまう事があります。
使用しているサーバーによってはサーバーにログインしてWebから.htaccessファイルを変えられるものもあります。
エックスサーバーはサーバパネルから.htaccessファイルを編集できますよ！
⑤成功すると、WebPタグのページの下方に緑でWebPと表示されるようになります↓
⑥もし、うまくいかない場合はブラウザのキャッシュを削除するか画像の容量や遅延読み込みに関するプラグインを停止してみて下さい。
多くの場合はこれで解決するはず…！
WebPとは軽くて速い新しい画像形式。
前章の最後で設定したWebPについて説明しておきます。
WebPとはGoogleが作っている新しい画像形式。
例えばJPEGとかPNGも画像形式でして、WebPもそのうちの一つという事になります。
WebPの特徴としては画像が軽くなり表示速度短縮につながる事。
WebPはまだ全てのインターネットブラウザで実装されている訳ではないのですが、Googleが推しているという事もあり、今後使用できるブラウザも増えていくでしょう。
表示速度を速める事はSEO対策としても有効ですし、WebP形式で画像を表示できるようにしておくのはユーザー視点からも良い事です。
EWWW Image Optimizerを使うなら必ずWebPの変換設定はしておきたいところですね。
EWWW Image Optimizerの使い方（手動で画像を圧縮する方法）
ここまでで述べてきたように最初の設定をしておけばEWWW Image Optimizerが自動的に画像を圧縮してくれます。
しかし、手動で画像を圧縮する使い方もありますので、そちらについても説明しておきます。
①ダッシュボード画面の「ツール」→「EWWW Image Optimizer」と進みます。
右上に「一括最適化」という箇所がありますのでクリック。
②「最適化されていない画像をスキャンする」をクリックすると、これまでEWWW Image Optimizerによって最適化されていない画像が最適化されます。
いつもしっかり画像を圧縮している場合はあまり使う事がない機能ではありますが、圧縮せず漏れてしまった画像をカバーできるのは嬉しいですね。
テーマの中に入っている画像などは意外と圧縮されていなかったりするので、一度は手動で圧縮してチェックしてみましょう。
※もし、全ての画像がしっかり圧縮されていて、これ以上圧縮できる画像が無い場合は手動でも圧縮出来ません。
できるならブログに画像を入れる前に圧縮しよう。
EWWW Image Optimizerを使えば、とても簡単にブログ内の画像容量を小さくできます。
ただ、TinyPNGというサイトを使って、自分自身で画像を圧縮してからブログに入れる方が、EWWW Image Optimizerで自動的に圧縮するよりも小さく出来て効果が大きいです。
あくまで僕のスタイルですが
- ブログに画像を入れる前に全てTinyPNGで手動で圧縮する。
- 漏れがあった時の為にEWWW Image Optimizerを入れておく。
- EWWW Image Optimizerは画像圧縮以外にも遅延読み込みやWebP形式の導入の意味もある。
というような感じで僕はやってます。
メディア設定もしっかりやっておこう。
最後に結構やってない人が多いのがメディア設定なので、触れておきます。
ダッシュボード画面左の「設定」→「メディア」でWordPress内の画像について設定できますが、ここをしっかり設定しておくのも重要。
ブログが軽くなり表示速度UPにつながるからです。
詳しい設定については下記記事を参照してください。
【知らないと損する】WordPressのメディア設定について解説！
今回の内容は以上です。
最後までお読み頂きありがとうございます！
