【2020年最新】EWWW Image Optimizerの設定方法・使い方まとめ

EWWW Image Optimizerは、画像を圧縮して表示速度を高速化するプラグインです。

ウェブページにおいて、データサイズの大部分を占めるのが画像なので、画像の圧縮は高速化に大きな効果があります。

EWWW Image Optimizerの設定方法や基本的な使い方とは?

本記事は、ブログブートキャンプブログの始め方-WordPressプラグインに関する内容となります。

レオのアイコン画像レオ

PageSpeed Insightsで画像サイズの削減を指摘されたんだけど、なんとかしたい!

アレックスのアイコン画像アレックス

EWWW Image Optimizerを使えば、全画像を最適化可能だ!次世代フォーマットのWebP配信も簡単にできるんだ。

スポンサーリンク

ジャンプできる目次

この記事の著者

アレックス
Alex

ブログブートキャンプ アレックス

10年間のブログ経験を活かしてブログブートキャンプを2020年に設立。ブログ運営スキルを鍛え上げるためのノウハウを発信中。

EWWW Image Optimizerとは

EWWW Image Optimizerは、画像を圧縮して表示速度を高速化するプラグインです。

プラグインをインストールしておくだけで、新しくアップロードする画像を自動的に圧縮してくれるので、ほとんど手間はかかりません。

例えば、次のように画像の品質をある程度は保ったまま、サイズを大きく削減できます。

EWWW Image Optimizer 圧縮前の画像
圧縮前: 352KB
EWWW Image Optimizer 圧縮後の画像
圧縮後: 37KB
レオのアイコン画像レオ

本当によく見ると画像の劣化はあるけど、ブログで使うなら気にならないレベルだね!

アレックスのアイコン画像アレックス

そうだな。写真の品質で勝負するブログでなければ、高速化のメリットの方が大きいだろう。

スポンサーリンク

EWWW Image Optimizerの設定方法

EWWW Image Optimizerの設定方法

EWWW Image Optimizerで画像を最適化するには、事前に設定をしておく必要があります。

WordPress高速化に効果的な画像最適化ができるおすすめの設定方法を確認していきましょう。

WordPrss管理画面 EWWW Image Optimizer設定

WordPress管理画面から「設定→EWWW Image Optimizer」と進むと、設定項目が表示されます。

画像圧縮の基本設定

まずは、EWWW Image Optimizerの画像圧縮に関する基本設定をしていきます。

ベーシック

EWWW Image Optimizer ベーシック設定

ベーシック設定では、以下の項目にチェックを入れてください。

  • メタデータを削除にチェック

こちらは、画像に含まれるカメラ機種や位置情報などの撮影条件を削除する設定となります。

設定後、「変更を保存」をクリックしましょう。

リサイズ

EWWW Image Optimizer リサイズ設定

リサイズ設定では、以下の通り設定を行ってください。

  • 画像のリサイズ: 幅の上限 780と入力
  • 既存の画像をリサイズにチェック

この設定を行うと、新しくアップロードする画像および過去にアップロードした画像が幅780ピクセル以下にリサイズされます。

設定後は、忘れずに「変更を保存」をクリックしておきましょう。

アレックスのアイコン画像アレックス

幅の上限に入力する値は、好みに応じて変更しても大丈夫だ。

WebPへの変換設定

続いて、画像を次世代フォーマットであるWebP形式で配信するための設定を行います。

WebPとは、Googleが開発している画像フォーマットで、従来の画像フォーマットよりもファイルサイズを削減できると言われています。

  • JPEG(非可逆圧縮)と比べて25〜34%削減
  • PNG(可逆圧縮)と比べて、28%削減

EWWW Image Optimizerでは、画像を自動的にWebPに変換した上で、表示するブラウザの対応状況に合わせて画像形式を出し分けできます。

WebP

EWWW Image Optimizer WebP変換

WebPのタブで「WebP変換」にチェックを入れて、「変更を保存」をクリックしてください。

  • WebP変換にチェック

さらに以下のコードをサーバーにある.htaccessの一番上に書き込みます。多くのサーバーでは、管理画面から編集できるようになっています。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
ConoHa WINGでWebP用コードを.htaccessに設置

例えば、ConoHa WINGでは、「サイト管理→サイト設定→応用設定→.htaccess設定」で.htaccessを編集します。

EWWW Image Optimizerの使い方

EWWW Image Optimizerの使い方

ここからは、EWWW Image Optimizerの使い方を確認していきましょう。

プラグインで画像を圧縮する方法としては、次のような2つのパターンがあります。

新しくアップロードする画像を圧縮

EWWW Image Optimizerの設定後にアップロードした画像は、全て自動的に圧縮されます。

EWWW Image Optimizerで圧縮された画像の確認

WordPressの管理画面から「メディア→ライブラリ」と進むと、画像がどれくらい圧縮されているのかを確認することができます。

この例では、33%〜63%の圧縮と、データサイズをかなり削減できていることがわかります。

過去にアップロードした画像を圧縮

一括最適化機能を使うことで、過去にアップロードした画像をまとめて圧縮することができます。

EWWW Image Optimizerの一括最適化

WordPress管理画面から「メディア→一括最適化」とクリックしてください。

EWWW Image Optimizer 過去画像の一括スキャン

最適化されていない画像をスキャンする」のボタンをクリックします。

EWWW Image Optimizer 一括最適化の実行

スキャン結果が表示されたら、「○○点の画像を最適化」をクリックすることで、過去にアップロードした画像の圧縮が始まります。

レオのアイコン画像レオ

一括最適化がなかなか終わらないけど大丈夫かな?

アレックスのアイコン画像アレックス

画像数が多い場合は、1時間ほどかかることもある。ブラウザを開いたままで気長に待とう!

まとめ

今回は、WordPressプラグインのEWWW Image Optimizerについて、設定方法や使い方を解説しました。

記事のポイントをまとめます。

本記事のポイント
  • EWWW Image Optimizerは、画像を圧縮して表示速度を高速化するプラグインです
  • 設定項目としては、画像の圧縮設定とWebPの配信設定などが用意されています
  • 画像圧縮の使い方としては、自動圧縮と一括最適化の2パターンがあります

同じカテゴリーの記事

以上、「EWWW Image Optimizerの設定方法・使い方まとめ」でした。

スポンサーリンク

ジャンプできる目次
閉じる