画像の容量は、Webサイトの表示スピードに大きく影響します。
画像のサイズが大きいままだと、ページの表示に時間がかかってしまうことがあります。
そのため、WordPressサイトに画像をアップロードする際は、あらかじめ画像をリサイズ・圧縮してからアップロードするのが理想です。
しかし、すでにWordPressのメディアライブラリにアップロードしてしまった画像を、一つずつリサイズ・圧縮し直して再アップロードするのは、かなり手間がかかります。
そこで本記事では、新しく追加する画像はアップロード時に自動でリサイズ・圧縮してくれるほか、すでにアップロード済みの画像もまとめて最適化できるWordPressプラグイン「EWWW Image Optimizer」の使い方を、分かりやすく解説します。
「Webサイトの表示が遅い気がする」「画像サイズを手軽に小さくしたい」という方は、ぜひ本記事を参考に「EWWW Image Optimizer」を導入してみてください。
EWWW Image Optimizerのインストール方法
EWWW Image OptimizerはWordPressの管理画面からインストールできます。
「プラグイン＞プラグインを追加」をクリックします。
「EWWW Image Optimizer」で検索し、出てきたプラグインをインストールします。
有効化をクリックします。
以上で、プラグインがインストールされました。
プラグインが有効化されると、設定メニュー内に「EWWW Image Optimizer」という項目が追加されます。
EWWW Image Optimizerの初期設定
EWWW Image Optimizerのインストールができたら、初期設定を行いましょう。
「設定＞EWWW Image Optimizer」をクリックします。
そうすると、初期設定ウィザードが表示されます。
「サイトを高速化」「今は無料モードのままにする」にチェックを入れて、「次」をクリックします。
続いて、プラグインの推奨設定画面が表示されます。
ここで、「メタデータを削除」「遅延読み込み」「WebP変換」にチェックが入っていることを確認します。
【 メタデータ 】
撮影場所やカメラ機種など、画像ファイルに含まれている付随情報のこと。メタデータを削除するだけで、画質を落とさずにファイルサイズを軽量化できる。
【 遅延読み込み 】
ユーザーがページをスクロールして画像が画面に表示される直前まで、画像の読み込みを遅らせる機能のこと。最初にページを開いたときの読み込みデータ量を減らせるため、Webサイトの表示速度を高速化できる。
【WebP変換 】
Googleが開発した次世代の画像フォーマット（.webp）に画像を変換すること。従来のJPEGやPNG形式と比べて、見た目の美しさ（高画質）を保ったまま、ファイルサイズを軽量化できる。
また、画像のアップロード時に自動でリサイズさせたい場合は、「幅の上限」および「高さの上限」の欄に、変更したい希望のサイズを入力し、「設定を保存」をクリックします。
リサイズさせたくない場合は「幅の上限」「高さの上限」を0とすることもできます。
「完了」をクリックします。
以上で、EWWW Image Optimizerの初期設定が完了です。
EWWW Image Optimizerの使い方
新規でアップロードする画像を最適化する方法
新規でアップロードする画像を圧縮したい場合は、特別な設定は必要ありません。
初期設定で設定した通りに、これからアップロードする画像はすべて自動で最適化（ファイルサイズの削減）が行われます。
アップロード済みの画像を一括最適化する方法
アップロード済みの画像を最適化するには、「メディア＞一括最適化」をクリックします。
「最適化を開始」をクリックします。
「さあ、始めましょう！」をクリックします。
そうすると、最適化できる画像が一覧表示されるので、「最適化を開始」をクリックします。
これで、アップロード済みの画像に関しても一括最適化できました。
参考：WebPに変換する方法
初期設定ウィザードで「WebP変換」にチェックを入れただけでは、実はまだサイト上の画像はWebPとして表示されていません。
実際にWebP形式で画像を正しく表示させるには、サーバー側の設定が必要になります。
「設定 ＞ EWWW Image Optimizer」を開き、「必須」タブを開きます。
下にスクロールし、「WebPの配信方法」の項目にある「リライトルールを挿入する」をクリックします。
これで、「挿入成功」と表示されれば、設定が完了です。
これで、サーバーの設定ファイルである「.htaccess」ファイルに、リライトルールが自動で挿入された状態になります。
まとめ
今回は、WordPressの画像最適化プラグイン「EWWW Image Optimizer」の使い方と設定方法を解説しました。
Webサイトの表示スピードが遅くて困っている場合、画像のリサイズや最適化を行わずにそのままアップロードしていることが原因の1つかもしれません。
「サイトの表示速度を改善したい」「ユーザーに快適にページを見てもらいたい」と考えている方は、ぜひこの機会にEWWW Image Optimizerを導入してみてください。
今回は以上になります。最後までご覧いただき、ありがとうございました！
WordPressの使い方から実務向けのコーディングまで
日々の学習をサポートします！
「WordPressの立ち上げ方や初期設定がわからない」「ブログのカスタマイズに挑戦したい」という初心者の方から、「実務レベルのデザイン再現ができない」「初案件の納品前にコードレビューをしてほしい」というコーダー志望の方まで、現役の現場視点からマンツーマンでサポートします。
「こんな初歩的なことを聞いてもいいのかな？」「自力ではエラーが解決できない」など、どんなお悩みも大歓迎です。まずは「無料お試し相談」をご利用ください。
メンター講座に関するお問い合わせは、以下からお気軽にご連絡ください。
Chatworkでお問い合わせ
