EWWW Image Optimizerの使い方｜WebP対応に位置情報削除もできる万能ツール

WordPress
2018.06.09

ブログを書く上でかかせないのが画像の存在。

読む側にとってはイメージを膨らませやすかったり、文章よりも分かりやすかったりとありがたい存在なのですが、一方で気になるのがその容量。

特にスマホから見る時に画像が重いとストレスを感じる人もいるでしょうし、Googleもブログのスピードを非常に重視するようになっています。

また、あわせて画像で気になるのがセキュリティ面。

フリー素材たくさんありますが、たまには自分で撮影した画像を載せることもありますよね。

その写真に位置情報が残っていると、最悪自宅が特定されてしまうなんてことにもなりかねません。

そこで今回は、サイズの圧縮から位置情報の削除まで、WordPressの画像まわりの課題を一気に解決してくれるプラグイン「EWWW Image Optimizer」を紹介したいと思います。

スポンサーリンク

EWWW Image Optimizerのインストール

通常のプラグインと同じインストール方法でOKです。

「EWWW Image Optimizer」で検索し、インストール後に有効化します。

EWWW Image Optimizerの使い方

画像の圧縮

  1. 管理画面左側の設定から「EWWW Image Optimizer」を選択します。
  2. 「Remove Metadata」にチェックを入れます。
  3. そのほかの設定は以下の通りでOKです。
  4. 下の方にある「変更を保存」ボタンを押します。

設定は以上で完了です。

後は今まで通り画像を添付するだけで、「EWWW Image Optimizer」が自動的に位置情報を削除してくれます。

念のため

心配性な私は、あわせてGoogle Chromeのプラグイン「EXIF Viewer」を導入して、本当に位置情報が削除されているかをアップロード後にチェックしています。


↑カーソルを合わせるだけで位置情報等のEXIFデータの確認ができます。

画像の圧縮

私は普段pngで画像をアップロードして使っていますが、このフォーマットは画質が良い代わりに容量がそれなりに大きくなってしまいます。

GoogleのPageSpeed Insightsでも、次世代フォーマットの画像にして速度を上げるように警告を受けていました。

そこで、「EWWW Image Optimizer」を使用して、Googleも推奨している画像フォーマット「webp」に変換するように設定を行います。

  1. 管理画面左側の設定から「EWWW Image Optimizer」を選択します。
  2. WebPタブを選択する。
  3. 「JPG、PNGからWebP」にチェックを入れる。
  4. 下の方にある「変更を保存」ボタンを押します。
  5. さらに下にあるテキストをコピーします。「リライトルールを挿入する」で挿入するとうまく機能しないため、このボタンは押さずに、自分で「.htaccess」に追記を行います。
  6. エックスサーバーの管理画面にログインします。（エックスサーバーでない場合ははそのサービスで提供されている方法で「.htaccess」を編集してください）
  7. ホームページの箇所から「.htaccess編集」を選択します。
  8. 複数のドメインを持っている場合はドメイン名を選択します。
  9. 「.htaccess編集」タブをクリックします。
  10. エディタ上で先ほどコピーした内容を先頭に張り付ける。
  11. 編集内容を保存する。
    ここで「.htaccess」に追記した内容はブラウザが対応していればWebPで表示し、対応していなければオリジナルの画像を表示するという内容です。
  12. 先ほどの「EWWW Image Optimizer」の画面に戻り、右下の画像がWebPになっていることを確認する。
    ブラウザが対応していないとPNGのままになりますので、その場合はChromeを使って確認しましょう。また、うまくWebPにならない場合は、ブラウザのキャッシュを削除するとうまくいくことが多いです。
  13. 管理画面左側のメディアから「一括最適化」を選択します。
  14. 「最適化を強制」にチェックを入れます。
  15. 「最適化されていない画像をスキャンする」をクリックします。
  16. ボタンが「最適化を開始」に変わるのでそれをクリックします。
    画像の数にもよりますが、それなりの時間がかかります。また、アクセス中の記事の画像を変換しようとすると失敗することがあるみたいなので、最適化前に「WP Maintenance Mode」等のプラグインを使用してブログ自体をメンテナンスモードにしておくと良いでしょう。
  17. 手順は以上になります。

おわりに

これで今まで通り画像をアップロードするだけで位置情報が削除され、Google推奨のフォーマットであるWebPに変換されるようになりました。

意外と画像のセキュリティは見落としがちなので、この辺の処理が自動化できるのはありがたいですね。

WebPは新しめの画像フォーマットなので対応していないブラウザもありますが、その時はオリジナルの画像が表示されるため問題ありません。

WebPにすることで、ものによっては画像のサイズが半分以下にまで落ちていて、PageSpeed Insightsのスコアも大きく上がりました。

実際にブログを開いて画像を保存しようとするとオリジナルのpng画像が保存されますが、ブラウザ上ではきちんとWebPの画像になっています。（ドラッグアンドドロップでブラウザの画像をデスクトップにコピーするとちゃんと拡張子がpngになります）

セキュリティ面でもSEO面でも大事な画像の取り扱い、この記事が皆さんの参考になればうれしいです。

コメント