こんにちは、りゅうのすけ(@k_r001)です。
この記事では、画像圧縮プラグイン「EWWW Image Optimizer」の設定方法と使い方についてまとめました。
こういった方に向けて、書いています。
モバイルでの表示速度が97点に達しているので、参考になると思います。
EWWW Image Optimizerとは？
「EWWW Image Optimizer」は、画像を最適化させるプラグインです。
「EWWW Image Optimizer」を入れておけば、アップロードした画像を自動で圧縮することができます。
画像を圧縮してアップロードしてたとしてもさらに圧縮できるのでおすすめです！
EWWW Image Optimizerのインストール
まずは、「EWWW Image Optimizer」をインストールしましょう。
インストールできたら有効化しましょう。
ダウンロードしたい方は、下記URLより取得できます。
EWWW Image Optimizerの設定
「EWWW Image Optimizer」を追加できたら設定していきましょう。
有効化するだけでは意味がないのでちゃんと設定を行いましょう。
EWWW Image Optimizerの初期設定
「EWWW Image Optimizer」の設定画面でまずは初期設定を行いましょう。
下記3つにチェックを入れます。
英語表記だと意味がわからないので、右側に日本語訳を書いてます。
チェックを入れたらNEXTを押しましょう。
WebP 変換にチェックを入れましょう。
WebPって？
WebPは既存の拡張子「JPEG」や「PNG」と比較しても、約30%近く容量を節約できる新しい拡張子です。
詳細：WebP
チェックができたら「Save Settings」を押せば初期設定完了です。
EWWW Image Optimizerで画像の遅延読み込み
画像の遅延読み込みは、「Lazy-load」の機能ですが、「EWWW Image Optimizer」でも設定可能です。
遅延読み込みの中にある
画像が表示領域に入った(または入ろうとしている)時にだけ読み込まれるため、読み込み速度を改善します。
にチェックを入れます。
「Autoptimize」にも同じ機能があります。
同じ機能が複数あると、干渉しあってエラーの原因になるので、使うのはどちらか一つにしましょう。
【Autoptimize】プラグインを使ってソースコードの最適化
変換リンクを非表示
変換リンクを非表示にしておきましょう。
そうすることで、拡張子が勝手に変換されるということがなくなります。
そうならないためにも設定は必ず行いましょう。
- 「Enable Ludicrous Mode」を押します。
- 変換
- 変換リンクを非表示にチェック
- 変更を保存
これで、「EWWW Image Optimizer」の設定は完了です。
EWWW Image Optimizerの使い方
「EWWW Image Optimizer」では、画像の圧縮を行います。
アイコン表示の場合
まずは画像を選択しましょう。
右下に圧縮率など変換する項目があります。
圧縮率を調整して圧縮すれば、好みのサイズに圧縮できます。
リスト表示の場合
画像右側に、再最適化とあります。
ここを押せば画像の最適化は完了です。
この方法では面倒なので、一括最適化を使いましょう。
EWWW Image Optimizerで画像の一括最適化
「EWWW Image Optimizer」で画像の一括最適化を行えば、これまでアップロードしていた画像を一括で最適化することができます。
メディア ➡︎ 一括最適化➡︎最適化されていない画像をスキャンする
これで画像の最適化は完了です。
次からアップロードする画像に関しては自動で最適化されるので、今後は最適化の必要はありません。
さらに表示速度を上げるには
表示速度をさらに高速化させるためには、事前にアップロードする画像を圧縮しておきましょう。
先に圧縮するのと、「EWWW Image Optimizer」のみで圧縮するのでは、圧縮率も違ってくるので必ず先に圧縮しておきましょう。
一度アップロードした画像の圧縮はできません。
一度アップロードした画像の再ダウンロード方法は、⬇︎下記記事でまとめてます。
ダウンロードした画像を圧縮して再アップロードしましょう。
画像を再アップロードするのが面倒な場合は、「EWWW Image Optimizer」で圧縮しましょう。
WordPressの画像を最適化するためにやるべき4つの手順
まとめ
「EWWW Image Optimizer」を使うだけで、圧縮し忘れた画像や、すでに圧縮した画像も最適化することができます。
ブログ記事の表示速度にとことんこだわって使い勝手のいいブログに仕上げましょう。
参考にしてみてください。
最後まで見ていただき、ありがとうございました。
