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