WordPressテーマSWELL導入方法を見てみる

EWWW Image Optimizerの設定方法と使い方【WebP化】

EWWW Image Optimizerの設定方法と使い方【WebP化】
フェニック

EWWW Image Optimizerで画像圧縮したいけど設定が難しいぞ?

今回はこのようなお悩みにお答えします。

EWWW Image Optimizerは、画像圧縮プラグインで人気No,1です。

圧縮率が高く、作業も簡単だからです。

ただ正しく設定をしないと「画像が表示されない」などの不具合が生じます。

そこで今回は、EWWW Image Optimizerの正しい設定方法と使い方を解説します。

この記事を読めば、ページ表示速度が大幅に向上します。

気になる方はのぞいてみてください。

追記です。

WordPressを立ち上げたばかりの人にはWordPressの初期設定の記事もおすすめです。

この記事の著者

Shota @Shota_Lab_1

3年目の副業ブロガー。2年間のブログ経験を活かし、2022年にブログフェニックスを設立。
WordPress立ち上げのノウハウを配信中。

さくっと設定方法を知りたい方はEWWW Image Optimizerの設定方法をクリックしてください。

目次

EWWW Image Optimizerとは

EWWW Image Optimizerは、無料でWordPress画像を圧縮するプラグインです。

画像の圧縮とは、画像ファイルの容量を下げることです。

EWWW Image Optimizerは、以下の方法で画像ファイルを圧縮します。

  • 人間にはわからない程度、画質を落とす
  • 画像の余分な情報をそぎ落とす
  • 縦横比を変えずに、画像サイズ(px)を小さくする
  • 画像をWebpに変換する
圧縮前の画像
圧縮前の画像
圧縮後の画像
圧縮後の画像

上の2つの画像は、EWWW Image Optimizerで圧縮する前と後の画像です。

圧縮後の画像は、画質がほとんど変わりません。

EWWW Image Optimizerは画質を落とすことなく、画像を圧縮することができます。

画像圧縮するとページ表示速度が向上する

webサイトの1ページあたりの画像容量の比率のグラフ
出典:KINSTA

EWWW Image Optimizerで画像圧縮すると、ページ表示速度が大幅に向上します。

Webサイト全体容量に対し、画像容量が21%も占めているためです。

ファイルの種類1ページあたりの容量比率
CSS2%
フォント3%
HTML1%
画像21%
JavaScript14%
その他0%
動画60%

動画の少ないWordPressブログの場合、画像容量の比率は更に高くなります。

画像を圧縮すれば、1ページあたりの容量を大幅に削減できるためページ表示速度が向上します。

画像圧縮するとバックアップが楽になる

All-in-One WP Migrationを使い、ブログをバックアップしている画像

上の図はAll-in-One WP Migrationを使い、ブログをバックアップしている画像です。

EWWW Image Optimizerで画像を圧縮すると、ブログ全体の容量が軽くなります。

そのためバックアップ完了までの時間が短くなります。

バックアップはとても重要な作業のため、画像を圧縮して作業負荷を下げることは重要です。

なおAll-in-One WP Migrationを使ったバックアップ方法は、以下の記事で解説しています。

EWWW Image Optimizerは不要?

EWWW Image Optimizerは不要ではありません。

不要でない理由は2つあります。

  1. EWWW Image Optimizerはアップロードするだけで画像圧縮できる
  2. EWWW Image Optimizerは画像圧縮プラグインで一番優秀

それぞれ解説します。

アップロードするだけで画像圧縮できる

EWWW Image Optimizerは、WordPressに画像をアップロードするだけで圧縮してくれます。

そのためブログ運営が非常に楽になります。

TinyPNGのトップ画面の画像
TinyPNGのトップ画面

TinyPNGなど無料で使える外部圧縮サイトがありますが、作業が面倒です。

TinyPNGで画像圧縮する場合は、以下の工程が必要です。

STEP
TinyPNGに画像をアップロード

1度にアップロードできるのは30枚まで

STEP
TinyPNGで圧縮した画像をダウンロード
STEP
圧縮する画像が30枚以上ある場合は、同じ作業を繰り返す
STEP
ダウンロードした画像をWordPressにアップロード

記事を更新するたびに、この工程を繰り返すのは面倒です。

EWWW Image Optimizerは、WordPressに画像をアップロードするだけで圧縮できます。

そのためブログ運営がとても楽になります。

画像圧縮プラグインで一番優秀

EWWW Image Optimizer以外にも画像圧縮プラグインがあります。

TinyPNG – JPEG, PNG & WebP image compression
Imagify – Optimize Images & Convert WebP
ShortPixel Image Optimizer

上記の画像圧縮プラグインを無料で使用する場合には、圧縮枚数に制限があります。

プラグイン無料での画像圧縮枚数(月当たり)
EWWW Image Optimizer無制限
TinyPNG – JPEG, PNG & WebP image compression500枚
Imagify – Optimize Images & Convert WebP250枚(1枚200KBの画像の場合)
ShortPixel Image Optimizer100枚

EWWW Image Optimizerは無料で画像を無制限に圧縮できます。

そのため画像圧縮プラグインで一番優秀だと判断できます。

インストール方法

WordPressのダッシュボードの【プラグイン】⇒【新規追加】をクリック

WordPressのダッシュボードの【プラグイン】⇒【新規追加】をクリックします。

プラグイン検索窓に「EWWW Image Optimizer」と入力

プラグイン検索窓に「EWWW Image Optimizer」と入力します。

EWWW Image Optimizerが見つかったら【今すぐインストール】⇒【有効化】をクリックしてください。

これでEWWW Image Optimizerのインストールは完了です。

EWWW Image Optimizerの設定方法

中休み

この項目では、EWWW Image Optimizerで画像圧縮する最適な設定方法を解説します。

初期設定

WordPressダッシュボードの【設定】⇒【EWWW Image Optimizer】をクリック

WordPressダッシュボードの【設定】⇒【EWWW Image Optimizer】をクリックします。

2021年6月から設定方法が変わりました。

初めてEWWW Image Optimizerをインストールした方は、以下の方法で設定してください。

利用目的

EWWW Image Optimizerの利用目的の設定方法

EWWW Image Optimizerの利用目的を聞かれるので、以下のように設定してください。

項目設定方法と解説
サイトを高速化チェックを入れる
保存スペースを節約チェックを入れる
Active 5X more optimization and priority supportチェックを入れない
⇒有料プランのため
今は無料モードのまま利用するチェックを入れる

設定が完了したら【次】をクリックしてください。

EWWW Image Optimizerの有料プランを使う必要はありません。

無料でページ表示速度を高速化するプラグインは他にもあるからです。

LiteSpeed Cacheの画像

当サイトは現在、LiteSpeed Cacheを利用してページ表示速度を高速化しています。

ブログフェニックスのパソコンのパフォーマンススコア
パソコンのスコア
ブログフェニックスのモバイルのパフォーマンススコア
モバイルのスコア

このプラグインを使い「PageSpeed Insights」でパフォーマンススコア100点をたたきだしています。

LiteSpeed Cacheは、LiteSpeedサーバーを利用している人が使用できるプラグインです。

LiteSpeedサーバーを使用しているサーバー会社とプランは、以下になります。

サーバー会社とプラン名初期費用初年度月額費用
ロリポップハイスピードプラン0円825円
カラフルボックス【Colorful Box】Box20円874円
ミックスホスト 【mixhost】スタンダードプラン0円1,078円
ラッコサーバーRK20円1,210円
コアサーバー のV2プラン CORE-X1,650円
⇒ドメイン同時取得で0円
528円
※月額料金は1年契約の場合

LiteSpeed Cacheの使い方は、以下の記事をご覧ください。

画像圧縮方法

次に画像の圧縮方法について聞かれます。

以下のように設定してください。

項目設定方法と解説
メタデータの削除チェックを入れる
⇒撮影日など画質に関係ない情報を削除できる
遅延読み込みチェックを入れない
⇒WordPressテーマと機能が被り不具合が発生
WebP変換チェックを入れない
⇒後の作業でWebP化の設定を行う
幅の上限1600
⇒SWELLのメインビジュアルの幅と同じ
⇒幅が1600px以上の画像を使うことはない
高さの上限0
⇒制限を設けない
埋め込みヘルプチェックを入れる
⇒設定項目に解説パートが加わる
匿名の報告チェックを入れない
⇒EWWW Image Optimizerに情報提供してもメリットがない

設定が完了したら【設定を保存】をクリックしてください。

画像の一括最適化の設定方法

次に画像の一括最適化について聞かれますが、後ほど設定するため【完了】をクリックしましょう。

①メタデータとは
メタデータの解説画像

メタデータとは、撮影時間や撮影機器など画像の付随情報のことです。

EWWW Image Optimizerを使いメタデータを削除することで、画質を落とさずに画像を軽量化できます。

②遅延読み込みとは
画像の遅延読み込みの解説画像
画像の遅延読み込み

【遅延読み込み】とは、プラウザに表示される画像を先出しする機能です。

表示していない画像を後から読み込むため「遅延読み込み」と呼ばれます。

画像の遅延読み込みは、多くのWordPressテーマに標準装備されています。

EWWW Image Optimizerの遅延読み込みを使用すると、機能が被り不具合が発生します。

Cocoonの場合、ヘッダー画像が表示されないトラブルが発生します。

WordPressテーマの画像遅延読み込みと機能が被らないように、チェックを外しておきましょう。

③EWWW Image Optimizerの幅の上限について

今回は【幅の上限】を1,600pxに設定しています。

幅が1,600pxを超える画像は、縦横比率を変えずに幅を1,600pxにリサイズします。

アップロードされた画像
アップロードされた画像
項目アップロード前の画像アップロード後の画像
画像サイズ3,023px×2,216px1,600px×1,173px
幅と高さの比率1:0.731:0.73
画像ファイルの容量946KB69KB

【幅の上限】を設定することで画像ファイルの容量が軽量化し、バックアップが楽になります。

Enable Ludicrous Modeへの変更

【Enable Ludicrous Mode】をクリック

EWWW Image Optimizerはデフォルトでは【簡単にモード】に設定されています。

高度な設定をするため【Enable Ludicrous Mode】をクリックしてください。

設定タブの数が3個から8個に増えた画像

設定タブの数が3個から8個に増えます。

設定が完了したら【変更を保存】をクリック

設定が完了したら【変更を保存】をクリックしてください。

リサイズ設定

リサイズ設定の設定方法

【リサイズ】のタブをクリックして画面を切り替えます。

リサイズ設定は以下のように設定してください。

項目設定方法と解説
リサイズ検知チェックを外す
⇒遅延読み込みに関する設定のため
既存の画像をリサイズチェックを入れる
⇒ブログに既にアップロードしている画像をリサイズ
他の画像をリサイズチェックを入れる
⇒メディアライブラリだけではなくプラグイン内の画像もリサイズ

リサイズ設定することで、既にアップロードしているブログ内の全ての画像をリサイズすることができます。

設定が完了したら【変更を保存】をクリック

設定が完了したら【変更を保存】をクリックしてください。

EWWW Image Optimizerのリサイズの無効化(※参考)

EWWW Image Optimizerのリサイズ設定(応用編)
項目設定方法と解説
thumbnail-150×150チェックを外す
medium-300×300【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
medium_large-768×9999【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
large-1024×1024チェックを外す
⇒メインで使用する画像のため
1536×1536-1536×1536【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
2048×2048-2048×2048【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
thumb-100-100×100(切り抜き)【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
thumb-150-150×150(切り抜き)【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
thumb-120-120×68(切り抜き)【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
thumb-120-120×68(切り抜き)【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
thumb-160-160×90(切り抜き)【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
thumb-320-320×180(切り抜き)【最適化の無効化】と【作成を無効化】にチェックを入れる
⇒使用しない画像の自動生成無効化のため
pdf-fullチェックを外す
⇒無効化すると不具合が発生するため

EWWW Image Optimizerで【リサイズの無効化】を設定をすると、サーバーの使用容量を抑制できます。

「ブログで使用しない画像」の自動生成を無効化できるからです。

All-in-One WP Migrationでバック中の画面
All-in-One WP Migrationでバック中

サーバー使用量を抑制するメリットは、バックアップ時間の短縮です。

WordPressでは【large-1024×1024(メディア設定の大サイズ)】以外の画像の使用シーンは、ほとんどありません。

森の画像(幅3264px×高さ2448px)
森の画像(幅3264px×高さ2448px)

しかしWordPressは画像をアップロードすると、さまざまなサイズの画像を自動生成します。

森の画像(幅3264px×高さ2448px)をWordPressにアップロードすると、13枚の画像が自動生成されました。

サーバー内の画像ファイル①
サーバー内の画像ファイル①
サーバー内の画像ファイル②
サーバー内の画像ファイル②
自動生成された画像画像の生成要因
①森の画像-2048px×1536px.jpgWordPressにより自動生成
②森の画像-300px×225px.jpg【メディア設定-中サイズ】により生成
③森の画像-320px×180px.jpgWordPressテーマにより自動生成
④森の画像-768px×576px.jpgWordPressにより自動生成
⑤森の画像-scaled.jpg(2560px×1920px)WordPressにより自動生成(フルサイズ用)
⑥森の画像.jpg元の画像(3264px×2448px)
⑦森の画像-100px×100px.jpgWordPressテーマにより自動生成
⑧森の画像-1024px×768px.jpg【メディア設定-大サイズ】により生成
⑨森の画像-128px×68px.jpgWordPressテーマにより自動生成
⑩森の画像-150px×113px.jpgWordPressテーマにより自動生成
⑪森の画像-150px×150px.jpg【メディア設定-サムネイルサイズ】により生成
⑫森の画像-1536px×1152px.jpgWordPressにより自動生成
⑬森の画像-160px×90px.jpgWordPressテーマにより自動生成

EWWW Image Optimizerで【リサイズの無効化】を設定をすると、ブログで使用しないの画像の自動生成を無効化できます。

Shota

これは上級者向けの内容です。わからなければデフォルト設定でOKです。

画像の自動生成無効化については、以下の記事でも解説しています。

変換設定

EWWW Image Optimizerの変換設定の解説画像

【変換】のタブをクリックして画面を切り替えます。

変換設定は以下のように設定してください。

項目設定方法と解説
変換リンクを非表示 チェックを入れる
⇒拡張子の自動変換を防ぐ
オリジナルを削除チェックを外す
⇒画像圧縮プラグインを変更する際に不具合が発生

【変換リンクを非表示】には必ずチェックを入れましょう。

チェックを入れないと画像の拡張子が自動変換されます。

  • JPEG⇒PNG
  • PNG⇒JPEG

画像の拡張子が変換されると、画像が粗くなってしまいます。

設定が完了したら【変更を保存】をクリックしてください。

WebP設定

EWWW Image OptimizerのWebP設定の解説画像①

【基本】のタブをクリックして画面を切り替えます。

WebP設定は以下のように設定してください。

項目設定方法と解説
WebP変換 チェックを入れる
⇒画像を全てWebPに変換する

WebPは、Googleが開発した次世代画像フォーマットです。

圧縮しても画質が落ちにくく、画像容量が軽いのが特徴です。

WebPはページ表示速度向上に最適な画像フォーマットです。

ただし【WebP 変換】にチェックを入れるだけでは、画像はWebPに変換しません。

更に設定を続けます。

EWWW Image OptimizerのWebP設定の解説画像②
<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_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
	<FilesMatch "\.(jpe?g|png|gif)$">
		Header append Vary Accept
	</FilesMatch>
</IfModule>
AddType image/webp .webp

【WebP配信用コード】をコピーして、使用しているサーバーの「.htaccessファイル」の一番上に貼り付けます。

【WebP 配信用コード】をコピーして、使用しているサーバーの「.htaccessファイル」の一番上に貼り付ける

「.htaccessファイル」の保管場所はレンタルサーバーによって異なります。

コアサーバーの場合「.htaccessファイル」はファイルマネージャーの中にあります。

STEP
コアサーバーにログインし【ツール】⇒【ファイルマネージャー】⇒【domains】⇒【対象のドメイン】をクリック
コアサーバーにログインし【ツール】⇒【ファイルマネージャー】⇒【domains】⇒【対象のドメイン】をクリック
STEP
【public_html】⇒【.htaccess】をクリック
【public_html】⇒【.htaccess】をクリック
STEP
「.htaccessファイル」の一番上に【WebP配信用コード】を貼り付け【Save File】をクリック
「.htaccessファイル」の一番上に【WebP配信用コード】を貼り付け【Save File】をクリック
STEP
WordPressの管理画面に戻り【変更を保存】をクリック
WordPressの管理画面に戻り【変更を保存】をクリック
STEP
「WebPルールが正常に検証されました」と表示されたら画像のWebP化は成功
「WebPルールが正常に検証されました」と表示されたら画像のWebP化は成功

自分のレンタルサーバーの「.htaccessファイル」の場所を調べてみましょう。

「.htaccessファイル」が分からない場合の対処方法

【リライトルールを挿入する】をクリック

「.htaccessファイル」が分からない場合は【リライトルールを挿入する】をクリックしましょう。

EWWW Image Optimizerが【WebP配信用コード】を「.htaccessファイル」に自動入力してくれます。

WebP画像に変換されない時の対処法

EWWW Image OptimizerでWebP画像に変換されない時の対処法

以下の項目にチェックを入れて【変更を保存】をクリックしてください。

  • JS WebP リライト
  • Picture WebP Rewriting
  • 強制 WebP

EWWW Image Optimizerの使い方

中休み

この項目では設定方法に基づき、実際に画像を圧縮する方法を解説します。

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

WordPressダッシュボードの【メディア】⇒【新規追加】をクリック

WordPressダッシュボードの【メディア】⇒【新規追加】をクリックしてください。

画像をアップロードするだけで、EWWW Image Optimizerが自動で画像を圧縮します。

圧縮された画像は【メディア】⇒【ライブラリ】をクリックすると確認できる

圧縮された画像は【メディア】⇒【ライブラリ】をクリックすると確認できます。

1Mを超える画像は80%以上、容量を削減してくれ

1Mを超える画像は80%以上、画像容量を削減してくれます。

アップロード済みの画像を圧縮する

WordPressダッシュボードの【メディア】⇒【一括最適化】をクリック

WordPressに既にアップロードしている画像や、ブログに掲載している画像を一括で圧縮することができます。

WordPressダッシュボードの【メディア】⇒【一括最適化】をクリックしてください。

【画像を最適化】をクリック

EWWW Image Optimizerが一括で圧縮する画像を選択しています。

【画像を最適化】をクリックしましょう。

【最適化済み】と表示された画像

【最適化済み】と表示されたら成功です。

圧縮後の画像ファイルの容量
圧縮後の画像ファイルの容量

実際にブログに掲載している画像をダウンロードして、圧縮されているか確認してみましょう。

締めに入る前にお知らせです。

SWELLユーザーの方にはSWELLプラグインの記事もおすすめです。

EWWW Image Optimizerの設定が終わったら

ブログ収益化ツールを導入しましょう。

ブログツールを導入すると、より確実に稼げます。

以下の記事では、開設14ヶ月で「月間28,000PV、月間収益5万円」を実現させた神ツールを紹介しています。

ぜひチェックしてみてください。

>>ブログアフィリエイト収益化を加速させるおすすめツール20選

EWWW Image Optimizerの設定方法と使い方のまとめ

今回はEWWW Image Optimizerの設定方法と使い方を解説しました。

EWWW Image Optimizer導入するメリット
  • ページ表示速度が大幅に向上する
  • バックアップが楽になる
  • 画像をアップロードするだけで圧縮できる

ただし、画像圧縮だけではページ表示速度の向上は限定的です。

メディア設定の画像

WordPressに挿入する画像サイズを【メディア設定】で最適化する必要があります。

【メディア設定】については以下の記事で解説しています。

今回の内容は以上です!

参考サイト

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントに日本語が含まれない場合は表示できません(スパム対策)

目次