WordPress画像をWebPへ変換して軽量化する方法

WordPress画像をWebPへ変換する理由

写真やアイキャッチ画像は、Webページの通信量の大きな割合を占めることがあります。JPG・PNGをWebPへ変換すると、見た目を大きく変えずに容量を小さくできる場合があり、ページ表示に必要な通信量を減らせます。

ただし、WebPへ変換すれば必ず軽くなるわけではありません。すでに強く圧縮されたJPG、小さな画像、色数の少ない図などでは差が小さい場合があります。変換前後の容量だけでなく、人物の顔、文字、細かな模様、グラデーションも比較してください。

• ✓記事本文やアイキャッチ画像の通信量を抑えたい
• ✓写真をPNGで保存していて容量が大きい
• ✓複数の新規画像をアップロード前に同じ形式へ揃えたい
• ✓画質と容量を見ながらWebPへ変換したい

WordPress 5.8以降はWebPを扱える

WordPress Coreの公式案内では、WordPress 5.8以降はWebP画像をJPEG・PNGと同じようにアップロードして利用できます。WebPでも、WordPressのレスポンシブ画像、srcset、遅延読み込みなどの仕組みを利用できます。

ただし、WordPress本体が対応していても、実際に画像を編集してサムネイルを生成するサーバー側の画像ライブラリがWebPへ対応していなければ利用できません。WordPressはGDまたはImagickを使うため、アップロード前に利用中のホスティング環境を確認します。

最初にテスト画像をアップロードして確認する

本番画像をまとめて変換する前に、小さなWebPを1枚用意し、WordPress管理画面の「メディア」からアップロードします。アップロード後にメディアライブラリで画像を開き、サムネイルと元画像が表示されるか確認してください。

テーマが使う一覧、記事本文、アイキャッチ画像などにも一度配置し、PCとスマートフォンで表示を確認します。アップロード自体が成功しても、キャッシュ、画像最適化プラグイン、CDN、テーマの処理が影響する場合があるため、実際の公開画面まで確認すると安全です。

1. 01
   WordPressとプラグインをバックアップする

   更新や設定変更を行う前に、ファイルとデータベースを復元できる状態にします。

2. 02
   WordPressを最新の安定版へ更新する

   少なくともWebP対応が導入された5.8以降であることを確認します。

3. 03
   小さなWebPを1枚アップロードする

   メディアライブラリへ追加し、エラーが表示されないか確認します。

4. 04
   生成画像と公開画面を確認する

   サムネイル、記事本文、アイキャッチ画像を表示し、見切れや読み込みエラーがないか確認します。

AllEditでJPG・PNGをWebPへ変換する手順

1. 01
   元画像を別に保管する

   JPG・PNGを上書きせず、再調整や互換性確認に使えるよう元ファイルを残します。

2. 02
   画像を追加する

   フォーマット変換ツールへ画像をドラッグ＆ドロップするか、ファイル選択から追加します。

3. 03
   書き出し形式でWebPを選ぶ

   保存形式をWebPへ変更すると、画質スライダーが表示されます。

4. 04
   画質を設定する

   40～100％の範囲で設定できます。まず90％前後の高めから試し、容量と見た目を比較します。

5. 05
   変換を実行する

   処理後の幅・高さ、容量、プレビューを確認します。複数画像には同じ設定が適用されます。

6. 06
   WebPを保存してWordPressへ追加する

   保存後のファイルを実際に開き、問題がなければメディアライブラリへアップロードします。

JPG・PNGのどちらをWebPへ変換するべき？

写真や商品画像のJPGは、WebPへ変換すると容量をさらに抑えられる場合があります。元JPGですでに失われた細部はWebPへ変換しても戻らないため、できれば最初の書き出しに近い高品質な元画像から変換してください。

写真をPNGで保存している場合は、WebPで大きく軽量化できることがあります。一方、ロゴ、図、スクリーンショット、文字中心のPNGは、透明背景と輪郭を確認します。AllEditのWebP出力は透明部分を保持できますが、画質を下げすぎると細い線や文字の周囲に変化が出る場合があります。

変換時の出力サイズとプラン制限

AllEditのフォーマット変換にはプラン別の出力上限があります。Freeは最大1280×720、Proは最大3840×2160（4K UHD）の枠内へ、縦横比を維持して必要な場合だけ縮小します。元画像が上限内なら自動で拡大しません。

WordPressテーマや表示場所が必要とする画像サイズを先に確認してください。Freeで縦長・正方形画像を変換する場合も、幅1280pxだけでなく高さ720pxの上限内へ収まるため、たとえば正方形の最大出力は720×720になります。より大きな解像度が必要ならProまたはリサイズツールの利用を検討します。

既存のメディアライブラリは自動で置き換わらない

AllEditで端末上のJPG・PNGをWebPへ変換しても、WordPress内にすでに登録されている画像、投稿本文のURL、アイキャッチ画像は自動では変更されません。新しいWebPは別ファイルとしてアップロードされます。

既存画像を置き換える場合は、サイトのバックアップを取り、記事本文、アイキャッチ、テーマ設定、OGP、商品画像、生成済みサムネイル、キャッシュ、CDNなどへの影響を確認します。大量の既存画像を変換する場合は、信頼できる専用プラグインや運用会社を検討し、必ず少数の画像で復元テストを行ってください。

EXIF・アニメーション・altテキストの注意点

AllEditのフォーマット変換は、ブラウザのキャンバスから新しい静止画像を生成します。元画像に含まれるEXIF、撮影日時、位置情報、コメントなどのメタデータは引き継ぎません。公開画像から位置情報を除きたい場合には役立ちますが、著作権情報などを保持したい用途では別途管理が必要です。

アニメーション画像は静止画として書き出されます。また、WordPressの代替テキスト、キャプション、説明は画像ファイルの変換だけでは設定されません。アップロード後にメディアライブラリで、画像の内容と役割に合うaltテキストを入力してください。

画像の処理場所と公開前のチェックリスト

AllEditでは、画像の読み込み、WebPへの変換、保存用ファイルの生成をブラウザ内で行います。選択した画像本体をフォーマット変換のためにAllEditサーバーへアップロードしません。プラン確認や利用枚数管理など、画像本体以外の通信は発生します。

• ✓WordPress 5.8以降を利用している
• ✓ホスティング側のGDまたはImagickがWebPに対応している
• ✓テスト用WebPをメディアライブラリへアップロードできた
• ✓サムネイル、記事本文、アイキャッチ画像を公開画面で確認した
• ✓変換後の容量が元画像より小さくなっている
• ✓人物、文字、透明背景、細い線の見た目に問題がない
• ✓必要な幅・高さがプランの出力上限内に収まっている
• ✓既存画像を置き換える場合はバックアップと復元手順がある
• ✓altテキスト、キャプション、ファイル名をWordPress側で確認した
• ✓元のJPG・PNGを別に保管した