このページでは画像サイズを小さくする事でページの読み込み速度を早くしてくれるプラグイン「EWWW Image Optimizer」について解説していきます。
ワードプレスでブログなどを書いている時に、ページが表示されるまで遅いと感じた事はありませんか？
そんな場合は実は「画像サイズ」に注目してみてください。
画像のファイルサイズが大きすぎると読み込みが遅くなるので、結果ページ全体の読み込み速度が遅くなるので注意です。
ポイント
画像が大きすぎるとこんなマイナスポイントがあります。
- 読み込みが遅くなって訪問者がすぐに他のサイトに行ってしまう
- ブログ全体のファイルサイズが大きいとサーバーの容量を食ってしまう
目次
「EWWW Image Optimizer」はこんなプラグイン
「EWWW Image Optimizer」は画像サイズを圧縮して軽量化してくれるプラグイン。
設定も簡単でしっかり軽量化してくれますので、是非導入したいプラグインです。
「EWWW Image Optimizer」をインストールしてみる
では早速「EWWW Image Optimizer」をインストールしてみましょう。
まずはワードプレスの管理画面の左から、「プラグイン」⇒「新規追加」をクリックします。
次に検索窓に「EWWW Image Optimizer」と入力します。
EWWW Image optimizer が出てきますので、「有効化」をクリックしてインストールは完了です。
「EWWW Image Optimizer」を設定してみる
インストールが完了したら、次は「EWWW Image optimizer」の設定です。
管理画面左の「設定」から「EWWW Image optimizer」を選択するとこんな画面になってます。
設定画面を見てみると「むずかしそう！」と思う人も多いはず。
でも実は最低限の設定で大丈夫です！
各タブを見てみる
上の画像の赤い四角で囲った所のタブを切り替えて設定していきます。
タブは左から見るとこうなっています。
- BASIC
- ExactDN
- Advanced
- リサイズ
- Convert
- WebP
- 上書きする
- Support
- Contribute
基本的にデフォルトのままで大丈夫ですが、いくつかチェックしておきたいポイントは以下の通りです。
【Basicタブ】と、【Advancedタブ】、【Convertタブ】のみを設定します。
【Basic タブ】の設定
まず、Basic タブを見てみると、上から以下の項目が並んでいます。
- Optimization API Key
- Remove Metadata
- JPG最適化レベル
- PNG最適化レベル
- GIF最適化レベル
- PDF 最適化レベル
となっています。
① Optimization API Key
この一番上は「APIキー」を購入した場合の有料設定項目になりますので今回は無視します。
（有料の機能を使うには、毎月１画像につき「０，００３ドル」の料金がかかります。）
今回は無料で使う方法ですのでここには何も記入しません。
② Remove Metadata
ここにチェックを入れる事で、不要なメタデータを削除してくれます。
メタデータを削除した画像は、必要に応じてメディア管理画面でより適切な情報を書き加える事が出来ます。
メタデータってなに
ワードプレスに取り込んだ画像には、場合によっては「メタデータ」という、一見目に見えない刻印のような物がくっついている場合があります。
このメタデータは時には画像とあまり関連性のない連番が付いていたり、画像とは無関係の名称になっている場合があります。
こういった場合、ブログ内でこの画像を使うと不必要な情報をグーグルの検索エンジンに伝えてしまうので、記事の上位表示に悪影響が出てしまい、上位表示されにくくなってしまう場合があります。
メタデータはこんな感じで理解する
例えば、１枚のひまわりの画像があるとします。
その「ひまわり」の画像には付帯情報として、「公園にて、今年8月」というメタデータが付いているかもしれません。
この情報が画像自体に埋め込まれていると、本来なら「ひまわり」として認識して欲しいところ、グーグルは「公園の画像」として認識してしまいます。
画像に含まれる情報も検索順位を決定する大事な情報なので、これではグーグルのbotに正しく評価してもらえません。
その写真はグーグルには「公園の画像」として認識されてしまいますのでメタデータを削除するのが良いという事になります。
（ワードプレスではメディア（画像）管理画面で適切なメタデータを入力する事が出来るようになっています）
③ JPG最適化レベル
ここは「無圧縮」か「Pixel Perfect」から選択できます。
今回は画質を崩さず圧縮したいので「Pixel Perfect」を選択します。
（この設定にする事で、Advancedタブで好みの圧縮率を設定できます）
ポイント
「Pixel Perfect」を選ぶ事で該当する画像のピクセルを適切に保った状態で圧縮できます。
④ PNG最適化レベル
ここも同様に「Pixel Perfect」を選択します。
⑤ GIF最適化レベル
ここも同様に「Pixel Perfect」を選択します。
⑥ PDF最適化レベル
これは「無圧縮」を選択します。
（無料バージョンでは「無圧縮」のみ選択できるようになっています）
【Advanced タブ】の設定
このAdvanced タブでは一番上の「JPG Quality Level」のみを設定します。
ここに数値を入れる事で、Basicタブで設定した、JPG最適化レベル、PNG最適化レベルの圧縮率が設定できます。
初めは９０くらいの設定にして画像を確認してから除序に下げる様にして下さい。
また、一度圧縮した画像は基本的に元に戻りませんので、画像圧縮を行う前に必ずバックアップを取る様にして下さい。
【Convert タブ】の設定
ココでは上から２番目の項目、「Delete Originals」にチェックします。
ここにチェックを入れると、画像を圧縮変換したあとで元の画像を削除してくれます。
以上の設定が終ったら、設定画面下の【変更を保存】をクリックして設定は完了です。
画像を圧縮は【ワンクリック】で軽量化完了！
設定が終っただけでは実はまだ画像は圧縮されていません。
次は実際に画像を圧縮して軽量化します。
まだ最適化されていない画像は、記事内では下の画像の様に表示されます。
早速画像を圧縮してみよう！
ワードプレスのバックアップを取ったあとで、以下の動作を行います。
- 画像の圧縮を実際に行うには、管理画面左の「メディア」から【一括最適化】をクリックします。
- 次に【最適化されていない画像をスキャンする】をクリック
最後に【最適化を開始】ボタンをクリックします。
最後に
これで無事『EWWW Image optimizer』の設定と画像圧縮が完了しました。
