WordPress画像圧縮の方法|EWWWでWebP化・一括最適化する手順

WordPressでWebサイトを運営していると、「画像を増やしてからページの表示が遅くなった」「スマートフォンでサイトを開くまで時間がかかる」と感じることがあります。

その原因のひとつが、画像ファイルの容量です。

特にデジタルカメラやスマートフォンで撮影した画像を、そのままWordPressへアップロードしている場合、1枚だけで数MBになることも珍しくありません。

そこで役立つのが、WordPressの画像圧縮プラグイン「EWWW Image Optimizer」です。

画像を自動的に最適化するだけでなく、WebPへの変換や、すでにアップロードしている画像の一括最適化にも対応しています。EWWW Image Optimizer公式でも、WebP変換や既存画像のBulk Optimize(一括最適化)が案内されています。

今回は、実際にEWWW Image Optimizerを設定した流れをもとに、WordPress初心者の方にも分かるように画像圧縮の方法を紹介します。

目次

WordPressで画像圧縮をしたほうがよい理由

Webサイトにおいて、画像はデザインやサービス内容を伝えるために欠かせません。

一方で、高画質な画像をそのまま掲載するとファイル容量が大きくなり、ページの読み込みに時間がかかる原因になります。

GoogleのWebパフォーマンスに関する資料でも、画像の最適化によって読み込み性能や通信量を改善できるとされています。

特に次のようなWebサイトでは、画像最適化の効果を感じやすくなります。

  • 施工事例や制作実績の写真が多い
  • ブログ記事に画像を多く掲載している
  • 商品画像を多く使用するECサイト
  • ファーストビューに大きな画像を使用している
  • スマートフォンからのアクセスが多い

画像圧縮は、単純に画質を悪くする作業ではありません。

見た目への影響をできるだけ抑えながらデータ容量を減らし、Webサイトで扱いやすい状態にすることが目的です。

画像圧縮はSEOにも関係する?

画像を圧縮しただけで検索順位が上がるわけではありません。

ただし、ページの読み込み速度や操作性などはユーザー体験に関係します。

GoogleはCore Web Vitalsを検索ランキングシステムで利用していると説明していますが、同時に、Core Web Vitalsの数値が良ければ必ず上位表示されるわけではないとも明記しています。

そのため、

「画像を圧縮すればSEO対策は完了」

と考えるのではなく、

「ユーザーが快適に閲覧できるサイトを作るための改善策のひとつ」

として考えるのがおすすめです。

EWWW Image Optimizerとは

EWWW Image Optimizerは、WordPressにアップロードする画像を自動的に最適化できるプラグインです。

主に次のようなことができます。

  • 新しくアップロードする画像の最適化
  • 既存画像の一括最適化
  • JPG・PNGなどからWebP画像を生成
  • 大きすぎる画像のリサイズ
  • 不要な画像メタデータの削除
  • Lazy Load(遅延読み込み)

EWWW Image Optimizerは、サーバー側で画像を最適化する仕組みにも対応しています。環境によって利用できる機能や圧縮方法が異なるため、実際の管理画面を確認しながら設定するのが安全です。

WebPとは?

WebP(ウェッピー)は、Webサイトで利用される比較的新しい画像形式です。

JPEGやPNGと比較して、同等程度の見た目を保ちながらファイルサイズを小さくしやすい特徴があります。GoogleのWebパフォーマンス資料でも、WebPはJPEG・PNG・GIFより効率よく圧縮できる形式として紹介されています。

現在の主要ブラウザでは広く対応しているため、WordPressサイトの画像軽量化にも使いやすくなっています。

EWWW Image OptimizerでWordPress画像を圧縮する方法

ここからは実際の設定手順を紹介します。

管理画面や項目名は、EWWW Image Optimizerのバージョンによって多少変更される場合があります。

1.EWWW Image Optimizerをインストールする

WordPress管理画面から、

「プラグイン」→「新規プラグインを追加」

を開きます。

検索欄に、

「EWWW Image Optimizer」

と入力してください。

表示されたEWWW Image Optimizerをインストールし、「有効化」をクリックします。

有効化すると、WordPressの「設定」内にEWWW Image Optimizerの項目が追加されます。

2.基本設定を行う

初期設定では、サイトに必要な機能を選択します。

一般的な事業サイトであれば、次の設定をひとつの目安にできます。

  • メタデータを削除:ON
  • WebP変換:ON
  • 最大画像サイズ:2560px程度
  • EWWW側の遅延読み込み:使用しているテーマに応じて判断

「メタデータ」とは、画像に保存されている撮影情報などの付加データです。

Webサイト上で不要な情報であれば削除することで、わずかながら画像を軽量化できます。

また、WordPressには大きな画像を扱うための仕組みがあり、標準では2560pxが大きな画像を縮小する際の基準値として設定されています。

一般的なコーポレートサイトやブログであれば、2560pxをひとつの基準として考えて問題ありません。

ただし、写真を高解像度で見せるポートフォリオサイトなどでは、用途に応じて調整しましょう。

SWELLを使用している場合は遅延読み込みの重複に注意

WordPressテーマ「SWELL」を利用している場合は、EWWW Image Optimizer側の「遅延読み込み」を安易にONにしないことをおすすめします。

SWELLには画像のLazy Load機能が備わっており、SWELL公式も、テーマと機能が重複するLazy Load系プラグインについて注意を案内しています。

Lazy Loadとは、画面の下にある画像を最初からすべて読み込まず、ユーザーがスクロールして画像付近に近づいた段階で読み込む仕組みです。

サイトの高速化に役立つ機能ですが、複数のプラグインやテーマで同時に同じ処理を行うと、不具合や表示崩れの原因になる場合があります。

SWELLを利用しているのであれば、

「画像圧縮・WebP生成はEWWW Image Optimizer」

「Lazy LoadはSWELL」

というように役割を分けると管理しやすくなります。

WebP変換を有効にする

次に「WebP変換」にチェックを入れます。

ここで注意したいのが、

「WebPを生成すること」

と、

「実際にWebPをブラウザへ配信すること」

は別だという点です。

EWWW Image Optimizerでは、サーバー環境に応じてリライトルールなどを利用してWebPを配信できます。WebPの配信方法には複数の方式が用意されています。

設定画面に、

「リライトルールを挿入する」

というボタンが表示されている場合は、利用しているサーバー環境を確認したうえで設定します。

正常に設定できると、EWWW Image Optimizerの確認欄に「WEBP」と表示されます。

これでWebP画像を利用できる状態になります。

サーバーによってはリライトルールを利用できない場合もあるため、エラーが出たときに無理に設定を書き換えるのは避けましょう。

不明な場合は、レンタルサーバー会社やWeb制作者へ確認するほうが安全です。

すでにアップロードしている画像を一括圧縮する

EWWW Image Optimizerを導入する前からWordPressを運営している場合、新しくアップロードする画像だけを圧縮しても、既存画像はそのまま残ります。

そこで利用するのが「一括最適化」です。

EWWW Image Optimizerの設定画面から、

「ローカル画像を最適化」

を選択します。

その後、

「最適化を開始」

をクリックすると、既存画像の圧縮が始まります。

EWWW Image Optimizer公式でも、既存画像についてはBulk Optimizeを利用して最適化やWebPコピーの生成を行えると案内されています。

実際にはメディア件数より多く表示されることがある

今回実際に設定したサイトでは、メディアライブラリ上では約60件でしたが、一括最適化では最終的に233件の画像が処理されました。

これは異常ではありません。

WordPressでは画像を1枚アップロードすると、テーマやWordPressの設定に応じて複数サイズの画像ファイルが自動生成されるためです。WordPressの公式開発ドキュメントでも、アップロード画像から複数のサブサイズを生成する仕組みが確認できます。

たとえば1枚の画像から、

  • サムネイル
  • 中サイズ
  • 大サイズ
  • テーマ独自サイズ

などが作成されることがあります。

そのため、

「メディアライブラリは60枚なのに200枚以上最適化された」

という場合でも、必ずしも問題が起きているわけではありません。

「節約なし」と表示されても失敗とは限らない

一括最適化をすると、画像によっては、

「18%削減」

「40%削減」

などと表示されます。

一方で、「節約なし」と表示される画像もあります。

これは、元の画像がすでに十分に軽量化されており、さらに圧縮しても容量が小さくならない場合などに表示されます。

WebPの容量が別途表示されていれば、WebP自体が正常に生成されているケースもあります。

すべての画像を無理に小さくする必要はありません。

画質を極端に落として数KB減らすよりも、見た目と容量のバランスを取ることが大切です。

一括最適化を行う前にバックアップを取る

既存サイトで画像を一括処理する場合は、作業前のバックアップをおすすめします。

EWWW Image Optimizerに限らず、WordPressで大量のファイルを変更する作業を行う場合は、万が一に備えて元の状態へ戻せるようにしておくと安心です。

バックアップ方法としては、

  • レンタルサーバーの自動バックアップ
  • WordPressバックアッププラグイン
  • サイト全体の手動バックアップ

などがあります。

特に企業サイトや問い合わせを受け付けているWebサイトでは、定期バックアップの仕組み自体を整えておくことをおすすめします。

最適化後に確認しておきたいこと

一括最適化が完了したら、それで作業終了ではありません。

実際のWebサイトを開いて表示確認を行いましょう。

最低限、次のページを確認します。

  1. トップページ
  2. 主要な固定ページ
  3. ブログ一覧
  4. ブログ記事
  5. スマートフォン表示

確認するポイントは次のとおりです。

  • 画像が表示されているか
  • 画像が極端に荒くなっていないか
  • ファーストビューが正常に表示されるか
  • レイアウトが崩れていないか
  • スマートフォンでも問題なく閲覧できるか

キャッシュ機能を利用している場合は、設定変更後にキャッシュを削除してから確認すると、変更内容を確認しやすくなります。

EWWW Image Optimizerは毎回一括最適化する必要がある?

基本的にはありません。

EWWW Image Optimizerを設定しておけば、新しくWordPressへアップロードした画像は自動的に最適化できます。EWWWの公式案内でも、新規アップロード画像の自動最適化に対応しています。

そのため、

初回:既存画像を一括最適化
今後:アップロード時に自動最適化

という運用で十分なケースが多いでしょう。

テーマを変更したり、画像サイズの設定を大きく変更したりした場合は、必要に応じて再確認します。

よくある質問

WebPにすれば元のJPGやPNGは削除してもいいですか?

基本的には、すぐに元画像を削除する必要はありません。

EWWW Image Optimizerでは、元画像とWebP画像を使い分けて配信する仕組みがあります。

サーバー構成やプラグインの設定によって配信方法が異なるため、「WebPができたから元画像を削除する」と自己判断するのは避けたほうが安全です。

画像圧縮で画質は悪くなりませんか?

圧縮方法によっては多少変化しますが、Web用途では適切な設定であれば、通常の閲覧で違いが分かりにくいケースも多くあります。

ただし、商品写真や施工写真など、細部の見え方が重要な画像は、圧縮後に必ず目視確認しましょう。

EWWW Image Optimizerは無料で使えますか?

無料で利用できる機能がありますが、サーバー環境や利用したい圧縮方式によって、有料APIやサービスが必要になる場合があります。現在の機能・料金体系については、導入時にEWWW Image Optimizer公式情報を確認してください。

画像圧縮だけでサイトは高速になりますか?

画像が表示速度のボトルネックになっている場合は改善が期待できますが、原因は画像だけとは限りません。

WordPressサイトの表示速度には、

  • サーバー性能
  • 使用テーマ
  • プラグイン数
  • JavaScript
  • CSS
  • Webフォント
  • キャッシュ
  • 外部サービス

なども関係します。

画像を軽量化しても遅い場合は、サイト全体を調査する必要があります。

まとめ

WordPressの画像圧縮は、Webサイトを快適に閲覧してもらうために取り組んでおきたい基本的な改善のひとつです。

EWWW Image Optimizerを利用すれば、

  • 新規画像の自動最適化
  • 既存画像の一括最適化
  • WebP変換
  • 大きな画像のリサイズ
  • メタデータの削除

などをWordPress上から設定できます。

特に既存サイトの場合は、

「EWWWを入れただけ」

で終わらせず、

「WebPが正常に配信されているか」

「既存画像まで一括最適化できているか」

まで確認することが大切です。

また、SWELLなど高速化機能を備えたテーマを使用している場合は、Lazy Loadなどの機能を重複させないように注意しましょう。

画像圧縮は比較的取り組みやすい改善ですが、WordPressにはキャッシュ、バックアップ、セキュリティ、プラグイン更新など、継続的に管理したい項目もあります。

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

この記事を書いた人

目次