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

2024/04/14

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

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

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

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

レオ

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

アレックス

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

ジャンプできる目次

【広告主の開示】
※当サイトは、広告主から支払われる広告収入を主な収入源として運営を行っています。
※当サイトの記事では、商品・サービスの紹介に広告主のアフィリエイト広告を利用しています。
※記事で紹介した商品・サービスを購入すると、広告主から当サイトに報酬が支払われることがあります。

EWWW Image Optimizerとは

WordPress.org

EWWW Image Optimizer Smaller Images, Faster Sites, Happier Visitors. Comprehensive image optimization that doesn't require a degree in rocket science.

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

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

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

EWWW Image Optimizer 圧縮前の画像 — 圧縮前: 352KB

レオ

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

アレックス

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

EWWW Image Optimizerの設定方法

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

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

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

EWWW Image Optimizer Unable Ludicrous Mode

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

画像圧縮の基本設定

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

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

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

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

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

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

アレックス

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

リサイズ

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

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

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

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

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

アレックス

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

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

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

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

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

WebPへの変換設定

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

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

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

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

WebP

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

WebP変換にチェック

「JS WebPリライト」や「<picture> 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