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

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

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

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

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

レオ

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

アレックス

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

ジャンプできる目次

この記事の著者

アレックス
@blog_bootcamp

アレックス(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 Unable Ludicrous Mode

まず初めに、基本のタブにある「Enable Ludicrous Mode」をクリックしてください。より詳しく各項目を調整できるようになります。

画像圧縮の基本設定

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

基本:メタデータ(位置情報)の削除

EWWW Image Optimizer メタデータを削除

基本設定では、以下の項目に必ずチェックを入れてください。

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

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

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

アレックス

他の高速化プラグインで画像の遅延読み込み(LazyLoad)を設定していなければ、遅延読み込みにチェックを入れてもOKだ!

リサイズ

画像のリサイズ設定では、2つのタブで設定を行っていきます。

EWWW Image Optimizer 画像のリサイズ-幅の上限

まずは、基本タブの画像のリサイズの項目で幅の上限を次の通り入力します。

  • 画像のリサイズ: 幅の上限 780と入力

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

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

アレックス

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

EWWW Image Optimizer リサイズの適用

続いて、リサイズのタブで2つの設定項目にチェックを入れてください。

  • 既存の画像をリサイズにチェック
  • 他の画像をリサイズにチェック

リサイズの上限設定と適用設定を合わせることで、全ての画像が適切なサイズにリサイズされて、画像の容量を大幅に削減できます。

こちらでも、設定後は「変更を保存」をクリックしておきましょう。

WebPへの変換設定

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

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

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

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

WebP

EWWW Image Optimizer WebP変換

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

  • WebP変換にチェック

「JS WebPリライト」や「<picture> WebPリライト」はチェック不要です。

EWWW Image Optimizer WebP変換の.htaccess

さらに表示される以下のコードをサーバーにある.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 WebP設定完了

全てのWebP設定が正常に完了すると、上記のように緑色の画像でWebPと表示されます。

WebPが反映されない場合

EWWW Image OptimizerでWebPが反映されない時の対処法

WebPが反映されない場合は、.htaccessの設定が正しいか再確認してください。

WebP用のコードはEWWW Image Optimizerによる自動挿入ではなく、「.htaccessの最上部への手動挿入」で上手くいくこともあります。

それでもWebPが反映されない場合は、「JS WebPリライト」の「<picture> WebPリライト」いずれかにチェックを入れてみましょう。

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パターンがあります

SWELLは、高機能で使いやすいテーマを探している方におすすめ!特にブロックエディターの使いやすさは抜群で、記事執筆がサクサク進みます。

AFFINGERは、豊富な実績があるテーマを使いたい方におすすめ!多くのブロガーに使われていて、ブログコンテストでの入賞実績も多数です。

THE THORは、おしゃれなデザインを使いたい方におすすめ!プロが制作したテンプレートが用意されていて、本格デザインをすぐに使えます。

同じカテゴリーの記事

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

この記事の参考情報

スポンサーリンク

スポンサーリンク

スポンサーリンク

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