はじめに
WordPressでブログやサイトを運営していると、
画像の表示速度が気になることはありませんか？
ページが重いと、読者が離れてしまう原因にもなります。
この記事では、画像を自動で圧縮＆軽量化してくれる
無料プラグイン「EWWW Image Optimizer」の基本設定から、
WebP変換のやり方まで、初心者の方にも分かりやすく解説します。
EWWW Image Optimizerってどんなプラグイン？
EWWW Image Optimizerプラグインは、画像最適化プラグインです
画像を自動で圧縮して、サイト表示を軽くしてくれるので
特に画像が多いサイトでは表示速度が改善されますよ
WPVividのImage Cleanerとの違い
私はサイトのバックアップや移行のためにWPVividプラグインを使用しているので
その中の機能、Image CleanerがあればもしかしてEWWW Image Optimizerって
要らなくなるんじゃないの？と思いましたが、
機能をよく見比べるとそれぞれの違いがありました。
| EWWW Image Optimizer | 画像の軽量化・WebP化・圧縮 |
| WPVividのImage Cleaner | 未使用画像の削除 |
目的が全然違いましたね(^▽^;
って事で、どちらも便利なプラグインですよ♪
ちょび
WPVividのImage Cleanerについてはこちらの記事で
詳しく書いていますので参考にしてくださいね
EWWW Image Optimizerのインストールと有効化
WordPress管理画面→
プラグインの追加から
｢EWWW Image Optimizer｣
を検索し、出てきたら
｢今すぐインストール｣をクリック
「有効化」ボタンを
クリックして有効化します
一覧のEWWW Image Optimizerの設定からか
管理画面左側メニューの設定→
「EWWW Image Optimizer」からも行けます
ので、設定に進みましょう
最初の設定
有効化を終えたばかりだと、
最初に簡易的な設定画面になります
サイトを高速化
今は無料モードのままにする
にチェックを入れて、｢次へ｣をクリック
メタデータを削除
WebP 変換
の２つを✅チェックし、
遅延読み込みのチェック
は外してください
大きさの上限ですが、
0にすると無効化されます
他は変更なしで大丈夫です
「設定を保存」をクリックしてください
「完了」ボタンをクリックして終了です
この画面で設定したものは
管理画面からの設定でも
変更出来る内容ですので、
後で変更したい場合は以下の
管理画面の設定を見てくださいね
管理画面からの設定
まず最初に
最初は簡易モードになっているので
まずは「ルディクロスモード」
ボタンを押してください
すると、上部の設定メニューの
タブが増えて詳細設定が出来る
ようになります。
※それぞれの設定は下記タブをクリックして確認してください
※WebP変換の説明は、必須タブの中にあります
- 必須
- ローカル
- 高度な設定
- リサイズ
- 変換
 ↑↓ クリックすると切り替わります  | 「ルディクロスモード」(詳細)と 「簡単モード」の切り替えボタン |
 | 有料オプションです |
 | 同上 |
 | 同上 |
 | 同上 |
 | メタデータは、画像の容量が大きくなるだけではなく、個人情報を拡散してしまうリスクもあるので、✅チェックを入れて削除でＯＫ |
 | フルサイズの画像を指定の幅、高さに制限します。最大は2560pxですが、0にすると無効です |
 | |
 | ページの読み込み速度が向上しますが、WordPressバージョン5.5以降では この機能が標準で組み込まれているのと 他の「Lazy Load」系プラグインと 競り合いもあるので、 私はチェックを外しています。 |
 | WebP変換は✅チェックした方が 表示が早くなります。 WebP について詳しくは 下の項目を見てください |
WebPって何？
Googleが開発した「画像の次世代フォーマット」で、
JPEGやPNGよりも軽量で高画質を維持できるのが特徴です。
JPEGやPNGよりも容量が軽い次世代フォーマットで
画質はほぼそのままで、容量が20～40％減ることもあり
対応ブラウザは今やほぼ100％（iOS含む）
※一部の古いプラウザだけが未対応(その場合は通常のJPEGやPNG表示が使われます)
WebP変換を「やっておくと良い」理由
WebPの設定
WebP 変換に✅チェックを入れると、その下に
WebPの配信方法などの詳細設定が出てきます
上記画面の「リライトルールを挿入する」
ボタンをクリックしてください。(.htaccessに自動で記入してくれます)
※[リライトルールを挿入する]には、
.htaccessを使えるApacheやLiteSpeedサーバーである必要があります。
「挿入成功」と出たら「変更を保存」ボタンを押し、管理画面をリロードしてみてください
「WebPルールが正常に検証されました」と出て、
PNGアイコン(赤)からWEBPアイコン(緑)に変わっていれば、
WebPの設定変更は完了です
WebP変換が変更できなかった場合
セルフテストが失敗することもありますが、しばらく待つと反映されることがあるので、少し時間を置いてからもう一度リロードしてみてください
キャッシュを削除して再読み込みする
- WordPressのキャッシュプラグイン（LiteSpeed Cacheなど）を使っている場合は、全てのキャッシュを削除してから、ブラウザで再読み込みしてみましょう。
- ブラウザのキャッシュも影響するため、Shift + F5 での強制リロードもおすすめです。
WebP画像が生成されているか確認する
- 「メディア」→「一括最適化」画面で「WebP のみ」にチェックを入れて再スキャンすると、変換されていない画像に対して WebP 変換が実行されます。
最後の手段として .htaccess を確認
- 「リライトルールを挿入」ボタンを押した後でも反映されない場合、サーバー側で
.htaccessの編集が無効になっていることがあります。 - コアサーバー（LiteSpeed環境）では多くの場合そのままで反映されますが、気になる場合はサポートに問い合わせるのも手です。
「ルディクロスモード」で出てくる設定タブです
特にデフォルトのままで変更する箇所はありませんが、一応説明を載せておきますね
 | JPG,PNG,GIFの最適化レベルは ピクセルパーフェクト そのまま変更しないで大丈夫です ※＊のついた選択は有料です。 ※ピクセルパーフェクトとは 「画質を落とさず、できる限り圧縮する」 という設定で圧縮率は低めですが、 画像劣化を避けたいならベストです ※下の３つの無圧縮は、圧縮効果がほぼ変わらないのでこのままで大丈夫です |
 | 無料利用ならローカルでOK （API未使用時の標準） |
 |
「ルディクロスモード」で出てくる設定タブです
 | 投稿頻度が多い場合はONにしてもOK。 リソースに余裕があれば。 |
 | 手動最適化の時だけONにする感じで。 普段はオフでいいです。 |
 | 「画像をシャープにする」は、 サムネ生成に失敗する原因になるので、 基本はオフ推奨です。 |
「ルディクロスモード」で出てくる設定タブです
リサイズタブは通常そのままで大丈夫。
自分のサイトに合わせて変更してください
 | |
 | 既にアップロード済の画像サイズ変更をしても良い場合はチェックを入れます。 |
 | リサイズを画像の種類によって 無効化する場合はチェックを入れます |
「ルディクロスモード」で出てくる設定タブです
変換リンクを非表示だけオンにしたほうがよいけど、
他は特に設定しなくて大丈夫です
 メディア→画像一覧の各画像の右側  → → | 非表示✅チェック推薦 非表示□のままだと メディア→画像最適化の欄に png→jpg(または逆)のリンクが表示され クリックで簡単に変更出来ちゃいます 私は誤クリックを防ぐために✅入れています |
 | オリジナル削除はチェック無しのままで。 |
 | |
 | |
 | |
 |
上記内容を変更したら・・・
上記内容を何か変更したら、忘れずに 「変更を保存」ボタンを押して反映させてくださいね
設定が完了したらＯＫです
EWWW Image Optimizerの有効化→設定まで終わると、
その後からアップした画像は自動で最適化してくれます。
上記はこの記事のアイキャッチ画像ですが、元画像はpngファイルで712KB
だったのですが、アップロード後webpファイルに変換されて、
サイズが73.8KBになっていたので、画像容量が638.2KB減った
と言うことになりますね＠＠すごい減りましたね♪
でも画質については少しだけ落ちるかなぁ？
・・・と言っても気にならない程度なのでうちのようなサイトなら大丈夫ですが、
写真やイラストなど高画質の画像がメインのサイトの場合は、
一度テストしてからご自身で判断した方が良いと思います。
過去の画像を一括最適化
EWWW Image Optimizerを有効化する前にアップロードした
過去の画像については、手動で最適化しなければいけません。
設定以前の画像を最適化する場合は以下の項目を見てくださいね
WordPress管理画面、左側メニューの
メディア→「一括最適化」
をクリックします
「最適化されていない画像をスキャンする」をクリックして、画像を調べます
最適化されていない画像数が出ますので最適化ボタンをクリックしてください
画像数が多いと少し時間が
かかりますね(^^;
うちの場合は、最初に設定せず
放置してた為、この数になって
しまいましたが、Wordpressを
インストール後、早めに設定
しておけばもっと早く終わりますよ♪
一括最適化は有効化前の画像に対して
なのでこの処理は一度やれば、
後は(設定変更などしなければ)
する必要はありません
完了となれば、終了です。
お疲れ様でした♪
まとめ
画像の最適化は、サイトの表示速度や
SEOにも関わる大切なポイントです。
EWWW Image Optimizer を使えば、難しい操作なしで
画像の圧縮や WebP 変換ができ、サイトの表示を軽くできます。
一度設定しておけば、新しくアップロードする画像も
自動で最適化されるので、とても便利です。
この記事を参考に、あなたのサイトも「軽くて快適」にしてみてくださいね。
コメント