文字だらけのブログでは、読者さんは読む気がなくなっちゃいますし、見た目も味気ない記事になってしまいます。
しかし、画像を入れまくってしまうと、記事が重たくなってしまい、表示に時間がかかってしまいますよね。
そんな悩みをサクッと解決できるのが、画像の圧縮に優れているプラグイン「EWWW Image Optimizer」です。
むずかしい設定は必要なく、ブログ初心者さんでも簡単に設定できる優れものですよ。
しかも、『PageSpeed Insights』の「改善できる項目」に表示される次世代の画像フォーマット「WebP」の対処も可能です。
これからブログを始める人はもちろん、まだ導入していない人は「EWWW Image Optimizer」を導入しておきましょう！
「EWWW Image Optimizer」プラグインのインストール方法
まず、「EWWW Image Optimizer」のインストール方法を解説していきます。
WordPress管理画面より「プラグイン > 新規追加」で、キーワードのところに「EWWW Image Optimizer」を入力、またはコピペします。
「EWWW Image Optimizer」が表示されたら、「今すぐインストール > 有効化」の順にクリックすれば完了です。
※画像では既にインストールしているため、「有効」という表示が薄い文字になっています。
「EWWW Image Optimizer」プラグインの設定方法
それでは、「EWWW Image Optimizer」の設定をサクサク進めていきましょう。
WordPress管理画面より「プラグイン > インストール済みプラグイン > 設定」、もしくは「設定 > EWWW Image Optimizer」から設定画面に移動します。
ここから必要最低限でしたほうがいい設定を、各項目ごとに解説します。
解説していない項目はスルーしても問題ないです。
「EWWW Image Optimizer」設定①基本
デフォルトで「メタデータの削除」にチェックが入っているはずですが、念のため確認してください。
ほかの項目はスルーしてもらってOKです。
「EWWW Image Optimizer」設定②WebP
続いて、次世代の画像フォーマット「WebP」の設定もやっちゃいましょう！
ここでは、すこしだけ手のかかることをしますので、慌てないでじっくりと設定してください。
まず、「WebP」の設定ページを選択します。
次に「WebP 変換」にチェックを入れ、「変更を保存」をクリックします。
すると次のようなコードが出てきます。
このコードを利用しているレンタルサーバーの「.htaccess」の冒頭にコピーして貼り付けます。
注意
この表示の下に「リライトルールを挿入する」というボタンがあるのですが、調べたところ、不具合の報告が多いので手作業で進めます。
これから「.htaccess」の編集の仕方を解説しますが、このブログで利用しているのは「ロリポップ！」なので、解説画面は「ロリポップ！FTP」での画像を使用しています。
ほかのレンタルサーバーを利用されている方は、それぞれの「.htaccess」の編集の仕方を調べてくださいね。
まず、「ロリポップ！」にログインして、「サーバーの管理・設定 > ロリポップ！FTP」を選択します。
「ロリポップ！FTP」にログインすると、いま「EWWW Image Optimizer」の設定をしているブログのファイルを開きます。
開いたファイルの中に「.htaccess」という項目があるので、クリックしてください。
「.htaccess」を開くとこのようなページになります。
この画面の下にコードがずらずら～っと書かれている枠があるので、そこの先頭にさきほどコピーしたコードを貼り付けます。
コードの貼り付けが終わったら、枠の下にある赤いボタンの「保存する」をクリックしてください。
ここまで終わったら、「EWWW Image Optimizer」の「WebP」の設定ページに戻って、ページ右下にある「WEBP」と書かれている四角の色を確認してください。
緑色になっていたら、成功です。
もし、「WEBP」が赤色のだったらままだったら？
もし、「.htaccess」の編集が終わっても緑色にならなかったら、以下のことを試してみてください。
- リロード（ページ再読み込み）をしてみる
- ブラウザのキャッシュを削除してみる
- 一度、ログアウトして再度ログインしてみる
- コピペしたコードを確認、または貼りなおす
ブラウザのキャッシュは、キャッシュ系プラグインを使うか、Googleブラウザを利用している場合は以下の方法で削除してみてください。
メモ
- 画面右上のGoogle Chromeの設定（3つの点）をクリックして、設定をクリック
- 設定画面に移動するので「プライバシーとセキュリティ > 閲覧履歴データの削除」を選択
- 「キャッシュされた画像とファイル」を選択して「データを削除」で完了
もし、画像の質にこだわるのであれば「変換」の設定もしておこう
高画質の画像にこだわるのであれば、「JPG」よりも「PNG」で画像を保存していることになるでしょう。
「EWWW Image Optimizer」の画像圧縮を利用していると、たまに勝手に「PNG → JPG」に変換されてしまう事例があるようです。
簡単にいうと画像を軽くする代わりに、画質を落としてしまっているんですね。
なので、画質にこだわるのであれば、「変換」のところの「変換リンクを非表示」にチェックを入れて、「変更を保存」してください。
参考までに、このブログではSEO対策として、サイトの表示速度を改善するために、あえて「Imsanity」というプラグインを利用して「PNG → JPG」の変換をしています。
「EWWW Image Optimizer」プラグインの使い方
基本的に「EWWW Image Optimizer」は、最初の設定さえできていれば、あとはふつうに記事に挿入する画像をアップロードすれば、自動で最適化とWebPへの変換をしてくれます。
なので、これから記事を書いていくのであれば、これ以上することはありません。
もし、そこそこ記事を投稿したあとに「EWWW Image Optimizer」を導入したのであれば、すでにアップロードした画像を一括で最適化＆WebPへの変換をしておくといいでしょう。
やり方はかんたんで、WordPress管理画面より「メディア > 一括最適化」のページですることができます。
「一括最適化」の画面に変わりましたら「最適化されていない画像をスキャンする」をクリックしてください。
スキャンが終わると次のような表示変わるので、「〇〇点の画像を最適化」をクリックしてください。
「完了」という表示が出たら、終了です。
個別に画像を最適化することもできる
WordPress管理画面の「メディア > ライブラリ」の画面で、個別に画像を最適化することもできます。
やり方は簡単で、最適化したい画像の右のほうにある「最適化」をクリックするだけです。
まとめ
「EWWW Image Optimizer」は、設定が簡単なのにかなり性能に優れているプラグインです。
文字離れが進んでいるのは、もはや若い世代だけともいえない時代になっているので、画像の有効な活用はブログには必須になってきています。
この記事のように、設定の解説には画像があったほうがわかりやすいですよね。
また、レビュー記事では、本当に商品を購入して紹介しているという信用の担保にもなります。
せっかく読者にとって質のいい記事なのに、読み込みが遅くて他の記事に移ってしまわれることになると、もったいないとしかいいようがありません。
「EWWW Image Optimizer」のように、プラグインでできる対策は、しっかりと取っておきましょう。