WordPressで画像を使っていると、「WebPにすると軽くなるらしい」「JPEGやPNGはもう使わないほうがよいのか」と迷うことがあります。WebPは、写真やイラストの見た目をできるだけ保ちながら、ファイル容量を小さくしやすい画像形式です。ページの表示を軽くするうえで役立ちますが、拡張子を変えるだけで必ず最適化できるわけではありません。
大切なのは、画像の用途に合わせて形式、縦横サイズ、圧縮の強さを決めることです。WebPは便利な選択肢ですが、元画像の保管や変換後の見た目の確認まで含めて運用する必要があります。この記事では、WebPの基本、JPEG・PNGとの違い、WordPressで使う方法、失敗しにくい確認手順を初心者向けに整理します。
WebPとは何か
WebPは、Web上で画像を効率よく配信するための画像形式です。ファイル名の末尾は通常「.webp」になります。写真に向く非可逆圧縮と、元の画素情報を保つ可逆圧縮の両方に対応し、背景を透過させることもできます。静止画だけでなくアニメーションにも対応しています。
Googleの公式説明では、同等の画質条件で比較した場合、非可逆WebPはJPEGより25〜34％、可逆WebPはPNGより26％小さくなるという検証結果が示されています。ただし、これはすべての画像で同じ削減率になるという意味ではありません。被写体、色数、ノイズ、元画像の圧縮状態、変換設定によって結果は変わります。
WebPを使う目的は、単に新しい拡張子へ置き換えることではありません。読者が見る画像の品質を必要な範囲で保ちつつ、通信量や読み込み時間を減らすことです。容量だけを追いかけて圧縮しすぎると、文字の輪郭や商品の質感が崩れ、記事の信頼性を損なうことがあります。
WebPがWordPressサイトに向いている理由
画像の通信量を減らしやすい
記事ページには、アイキャッチ、本文写真、図解、プロフィール画像など、複数の画像が並びます。1枚ごとの差が小さくても、ページ全体では通信量に大きな差が出ます。特にスマートフォン回線では、容量の小さい画像ほど表示までの待ち時間を短くしやすくなります。
ただし、WebPへ変換する前に画像の縦横サイズも確認してください。表示幅が800ピクセル程度なのに、4000ピクセルの写真をそのまま使えば、形式を変えても不要な情報を多く残します。まず用途に合う寸法へ縮小し、その後でWebPへ変換する順番が基本です。
写真と透過画像の両方に使える
従来は、写真はJPEG、背景を透明にしたロゴや図はPNGという使い分けが一般的でした。WebPは非可逆・可逆の両方と透過に対応するため、幅広い画像を同じ形式で扱えます。運用する形式を減らしやすい点はメリットですが、すべての画像を同じ設定で変換する必要はありません。
色の変化が緩やかな写真は非可逆圧縮、文字や線が多い図解は高めの品質設定または可逆圧縮、透明部分が必要な素材は透過対応というように、内容に合わせて判断します。用途ごとの見た目を確認するほうが、画一的な変換より安全です。
WordPressで直接扱える
WordPressはバージョン5.8からWebP画像のアップロードに対応しています。通常の画像と同様にメディアライブラリへ追加し、投稿や固定ページで利用できます。アップロード時には、テーマや設定で使われる複数の画像サイズも生成されます。
ここで注意したいのは、WordPressがWebPに対応していることと、アップロードしたJPEGやPNGが自動的にWebPへ変換されることは別だという点です。標準状態では、元の画像形式に応じた派生画像が作られます。自動変換を使いたい場合は、サーバー機能、画像最適化サービス、対応プラグインなど別の仕組みが必要です。
JPEG・PNG・WebPの違い
画像形式は、優劣だけで選ぶものではありません。何を表示し、どの程度の品質を残し、どこで編集するかによって適した形式が変わります。まずは代表的な特徴を整理しましょう。
JPEGが向いている画像
JPEGは写真のように色数が多く、細かな濃淡がある画像を小さくするのが得意です。長く使われてきたため、画像編集ソフトや管理ツールとの互換性も高い形式です。一方で、保存のたびに圧縮による劣化が重なりやすく、背景透過には対応していません。
既存の制作フローでJPEGが安定しており、容量も十分小さい場合は、無理に変換する必要はありません。すでに強く圧縮されたJPEGをWebPへ再圧縮しても、削減量が少ないまま画質だけが落ちることがあります。
PNGが向いている画像
PNGは、ロゴ、図解、画面説明、文字入り画像など、輪郭をくっきり保ちたい画像に向きます。可逆圧縮のため画素情報を保ちやすく、背景透過にも対応します。その反面、写真をPNGで保存すると容量が大きくなりやすい点に注意が必要です。
編集用の原本や、細部を正確に残したい素材としてPNGを保管し、Web掲載用だけをWebPへ変換する方法があります。元画像を残しておけば、将来別の設定で変換し直すときにも困りません。
WebPが向いている画像
WebPは、サイト上で配信する写真や図を軽くしたい場合に有力です。非可逆と可逆、透過を選べるため、JPEGとPNGの用途を広くカバーできます。現在の主要ブラウザーでは利用できますが、古いソフトや一部の外部サービスでは読み込みや編集に対応していない場合があります。
WebPを最終配信用の形式、JPEGやPNGを編集・保管用の原本と考えると整理しやすくなります。WebPだけを残すのではなく、必要に応じて元画像へ戻れる状態を作っておくことが安全です。
WebPに変換しても軽くならない原因
画像の縦横サイズが大きすぎる
ファイル形式を変えても、画素数が多すぎれば容量は大きくなります。カメラやスマートフォンで撮った写真は、サイトで表示する幅よりはるかに大きいことがあります。WordPressへ入れる前に、実際の表示用途に合わせて縮小してください。
アイキャッチ、記事本文、サムネイルなどで必要な幅はサイトのデザインによって異なります。特定の数値を万能な正解と考えず、テーマのコンテンツ幅や表示端末を確認して決めます。高密度ディスプレイを考慮して少し大きめに用意する場合も、無制限に大きくする必要はありません。
品質設定が高すぎる
変換ツールの品質を最高に設定すると、画質は保ちやすい一方で容量があまり減らないことがあります。反対に下げすぎると、写真の空や肌に帯状のムラが出たり、文字や細い線の周囲がにじんだりします。最適な値は画像ごとに異なります。
一度で決めず、数段階の設定で書き出して、実際の表示サイズで比較するのが確実です。原寸を大きく拡大して欠点を探すだけでなく、読者が見るスマートフォンやパソコンの表示でも確認します。
元画像がすでに小さい
十分に縮小・圧縮されたJPEGやPNGは、WebPへ変換しても差が小さいことがあります。数キロバイト減らすために変換工程や管理負担を増やすべきかは、画像の使用回数やページ全体の重さで判断します。
容量が増える逆転も起こり得ます。変換前後のファイルサイズを必ず比較し、小さくならなかった画像は元形式を使うという判断も正解です。
同じ画像を何度も再圧縮している
非可逆圧縮された画像を開き、保存し直し、さらに別のサービスで圧縮すると、劣化が積み重なります。変換作業は、できるだけ品質の良い元画像から一度だけ行います。編集途中のファイルと掲載用ファイルを分け、どちらが原本か分かる名前にしておくと混乱を防げます。
WordPressでWebPを使う方法
アップロード前に変換する
最も分かりやすい方法は、パソコンや画像編集ツールでWebPへ変換してから、WordPressへアップロードする方法です。変換前後の容量と画質を自分で比較でき、不要なプラグインを増やさずに済みます。画像の枚数が少ないサイトや、記事ごとに丁寧に確認したい場合に向いています。
変換サービスへ画像を送る場合は、画像に個人情報や機密情報が含まれていないか確認してください。利用規約、保存期間、二次利用の扱いが分からないサービスへ、顧客資料や未公開商品画像を安易にアップロードしないことが大切です。
作業の流れは、元画像を複製し、用途に合う寸法へ縮小し、WebPで書き出し、見た目と容量を比べ、問題がなければメディアライブラリへ追加するという順番です。元のJPEGやPNGは、WordPressの外にバックアップとして保管します。
画像最適化プラグインを使う
画像が多いサイトでは、アップロード時の圧縮やWebP生成に対応したプラグインを使う方法があります。手作業を減らせますが、どのプラグインでも同じ動きをするわけではありません。変換を自分のサーバーで行うもの、外部サービスへ送るもの、WebPを別ファイルとして生成して配信を切り替えるものなどがあります。
選ぶときは、無料枠や料金だけでなく、元画像を残すか、既存画像も変換できるか、削除時に復元できるか、使用中のサーバーやキャッシュ機能と競合しないかを確認します。複数の画像最適化プラグインを同時に動かすと、重複処理や表示不具合の原因になりやすいため避けます。
導入前にサイト全体とデータベースをバックアップし、最初は数枚で試します。問題がなければ対象を広げ、変換中にブラウザーを閉じてもよい仕組みか、処理が完了するまで待つ必要があるかも説明書で確認してください。
サーバーや配信サービスの機能を使う
レンタルサーバー、CDN、画像配信サービスに、端末やブラウザーに合わせて画像形式を変換・配信する機能が用意されている場合があります。WordPress内のファイルをすべて置き換えずに運用できることがありますが、契約中のプラン、キャッシュ、DNS、テーマとの組み合わせで設定方法は変わります。
機能名だけで有効化せず、元画像の扱い、配信されるURL、キャッシュ削除の方法、停止後の挙動を公式マニュアルで確認します。すでにプラグイン側でWebPを配信しているなら、二重変換にならないかも確認してください。
アップロード前に行う確認
元画像を残す
WebPへ変換した後も、元のJPEGやPNGを別の保存場所に残します。WordPressのメディアライブラリだけを保管場所にすると、誤削除や障害、別形式への再変換が必要になったときに困ります。フォルダーを記事名や撮影日で分け、元画像と掲載用画像が区別できる名前を付けます。
ファイル名を整理する
アップロード前に、画像の内容が分かる短い英数字のファイル名へ整えます。自動生成された長い記号列や「image-final-final2」のような曖昧な名前は管理しにくくなります。ファイル名の変更はアップロード前に行うほうが安全です。
容量と画質を比較する
変換前後のファイルサイズを確認し、WebPのほうが小さくなっているかを見ます。そのうえで、人物の顔、商品表面、グラデーション、細い文字、透過部分など、崩れやすい場所を確認します。容量の削減率だけで採用を決めないようにしましょう。
サーバーがWebPを扱えるか確認する
WordPress本体が対応していても、実際の画像処理はサーバーのGDやImageMagickなどのライブラリに依存します。アップロード時にエラーが出る、サムネイルが生成されないといった場合は、WordPressやPHPのバージョン、サーバーの画像処理対応、ファイルの破損を確認します。
WordPressへ追加した後の確認
メディアライブラリで開けるか
アップロード後、メディアライブラリでサムネイルが表示されるか、画像の詳細画面で寸法やファイル情報を確認できるかを見ます。アップロードが完了したように見えても、派生サイズの生成に失敗している場合があります。
投稿画面と公開前プレビューで確認する
記事へ挿入し、公開前プレビューでパソコンとスマートフォンの両方を確認します。画像が引き伸ばされていないか、ぼやけていないか、縦横比が崩れていないか、透過部分に不自然な色が出ていないかを見ます。キャプションや代替テキストも必要に応じて設定します。
WebPへ変換しても、画像の意味を検索エンジンや音声読み上げへ伝える代替テキストは自動的に整いません。装飾だけの画像を除き、記事の文脈に必要な画像には、見た目と役割を簡潔に説明する代替テキストを付けます。
実際に配信される形式を確認する
プラグインやCDNで自動変換している場合、メディアライブラリに見える拡張子と、閲覧者へ配信される形式が異なることがあります。ブラウザーの開発者ツールを使える場合は、ネットワーク情報やレスポンスのContent-Typeを確認すると確実です。初心者の場合は、プラグインやサービスの診断機能を利用しても構いません。
キャッシュを更新する
画像を差し替えたのに古い画像が表示される場合は、WordPressのキャッシュ、サーバーキャッシュ、CDN、ブラウザーキャッシュのいずれかが残っている可能性があります。使用している仕組みを確認し、必要な範囲だけキャッシュを削除します。設定をむやみに変更する前に、別のブラウザーやシークレットウィンドウでも確認すると切り分けやすくなります。
既存画像をまとめてWebPにするときの注意点
すでに多くの記事があるサイトでは、一括変換を急がないことが重要です。画像URL、テーマの背景画像、CSSで指定した画像、構造化データ、SNS共有画像など、メディアライブラリ以外から参照される画像もあります。変換方法によっては、削除や停止時に画像が表示されなくなる可能性があります。
まずバックアップを取り、テスト環境または少数の画像で試します。代表的な記事、トップページ、カテゴリーページ、スマートフォン表示、問い合わせフォーム周辺などを確認し、問題がなければ少しずつ対象を広げます。公開サイトで一度に全画像を処理すると、サーバー負荷や容量不足が起こっても原因を追いにくくなります。
一括処理後は、元画像とWebP画像が両方残る方式か、置き換える方式かを確認します。両方残す場合はディスク使用量が増えます。置き換える場合は復元手段が必要です。自分のサイトでどちらを優先するかを決めてから実行してください。
WebPと表示速度の関係
画像容量を減らすことは表示速度の改善に役立ちますが、WebPにしただけでサイト全体が必ず高速になるわけではありません。大きすぎる画像、画面外画像の読み込み、サーバー応答、JavaScript、広告、外部フォントなど、表示速度には複数の要因があります。
WordPressは画像挿入時に、閲覧環境に応じたサイズを選びやすくする属性を出力します。テーマやプラグインが正しく対応していれば、必要以上に大きい画像の配信を抑えられます。WebPはその仕組みと組み合わせることで効果を発揮しやすくなります。
画像の種類ごとに変換方法を考える
風景や人物などの写真
写真は色や明るさの変化が連続しているため、非可逆圧縮のWebPで容量を減らしやすい画像です。最初から極端に品質を下げるのではなく、元画像を複製し、少しずつ設定を変えた候補を作ります。空や壁のようななだらかな部分、髪や葉のような細部、人物の肌を重点的に確認すると、圧縮による違和感を見つけやすくなります。
写真にカメラのExif情報が残っている場合は、撮影場所など不要な情報を掲載用ファイルに残さない運用も検討します。ただし、著作権情報など必要なメタデータまで機械的に削除すべきかは、画像の管理方針に応じて判断してください。
文字入りの図解やスクリーンショット
文字や細い線がある画像は、少しのにじみでも読みやすさが下がります。写真と同じ低い品質設定をそのまま使わず、文字の輪郭を実際の表示サイズで確認します。場合によっては可逆WebPやPNGのほうが適することがあります。画像内の文章を小さく詰め込まず、本文のテキストとして説明することも、アクセシビリティと更新のしやすさにつながります。
操作説明のスクリーンショットは、必要な範囲だけを切り抜くと容量を減らせます。画面全体を載せるより、読者が見る場所を明確にしやすい利点もあります。個人名、メールアドレス、管理画面URL、注文情報などが映り込んでいないか、変換前に必ず確認します。
ロゴや線画、背景透過素材
色数が少なく境界が明確なロゴや線画は、非可逆圧縮で輪郭の周囲にノイズが出ることがあります。可逆WebPとPNGを比較し、容量差が小さければ編集や互換性に優れるPNGを残す選択もできます。なお、第三者のロゴは権利や利用ガイドラインを確認し、容量最適化とは別に適切な使用許可を判断する必要があります。
背景透過画像では、透明部分との境界に白や黒の縁が出ていないかを、明るい背景と暗い背景の両方で確認します。掲載先の背景色だけで確認すると、別ページやダークモードで不自然に見える場合があります。
継続運用のルールを決める
WebP導入後に重要なのは、担当者が変わっても同じ基準で画像を用意できる状態です。記事ごとに判断がばらつくと、ある画像は大きすぎ、別の画像は圧縮しすぎという状況になります。厳密な数値を一つに固定するより、用途別の確認手順を短く共有するほうが実用的です。
たとえば、アイキャッチと本文画像の想定表示幅、元画像の保存場所、ファイル名の付け方、変換に使う仕組み、画質の確認箇所、WordPressへアップロードした後の確認担当を決めます。プラグインやサーバー機能を変更した日も記録しておくと、不具合が起きたときに原因を追いやすくなります。
定期的にメディアライブラリを確認し、重複画像や使われていない派生ファイルをむやみに削除するのではなく、参照先とバックアップを確認して整理します。WordPressは一つの元画像から複数サイズを生成するため、見覚えのないファイルが不要とは限りません。ファイルシステムから直接削除せず、利用中のテーマやプラグインの仕様を確かめてください。
サイトを別サーバーへ移転するときは、WebPファイルだけでなく、配信切り替えのルールやキャッシュ設定も移行対象になります。移転後に代表的な記事を開き、画像URL、表示形式、代替テキスト、スマートフォン表示を再確認します。変換機能を停止した場合にも元画像へ戻れることを確認しておくと安心です。
WebP運用でよくある失敗
拡張子だけを書き換える
「photo.jpg」を「photo.webp」に名前変更しても、画像の中身はJPEGのままです。画像形式の変換には、対応する画像編集ソフト、変換ツール、サーバー機能などを使う必要があります。変換後はファイルが正常に開けることを確認します。
元画像を削除してしまう
容量を減らすために元画像をすぐ消すと、後から高品質版が必要になったときや、別の形式へ移行するときに困ります。掲載用WebPと編集用原本は役割が違います。原本はパソコンだけに置かず、別の記録媒体やクラウドなど、障害時にも取り出せる場所へバックアップします。
プラグインを重ねて使う
圧縮、WebP生成、遅延読み込み、CDN配信を複数のプラグインで重複させると、どの機能が画像URLを書き換えているのか分からなくなります。まず現在有効な画像関連機能を一覧にし、役割が重ならない構成にします。サーバー側の最適化機能も忘れずに確認してください。
画質を確認せず一括変換する
写真には問題がなくても、スクリーンショットの小さな文字や図解の細線が読みにくくなることがあります。異なる種類の画像を数枚選び、変換設定ごとに比較してから全体へ適用します。商品の色や作品の質感が重要なサイトでは、容量より再現性を優先する画像があっても構いません。
表示できたことだけで完了と考える
画像が見えていても、意図したWebPではなく元のJPEGが配信されている場合があります。反対にWebPは配信されていても、元画像とほぼ同じ容量なら改善効果は小さいままです。形式、転送量、見た目の三つをセットで確認します。
初心者向けの安全な進め方
初めてWebPを導入する場合は、次の順序で進めると失敗を抑えられます。
- サイトと画像のバックアップを取る
- よく使う画像の表示幅を確認する
- 写真、図解、透過画像から代表例を1枚ずつ選ぶ
- 元画像を複製して適切な寸法へ縮小する
- 数段階の品質でWebPへ変換する
- 容量と見た目を比較して設定を決める
- WordPressへ少数だけアップロードする
- メディアライブラリ、記事、スマートフォンで表示を確認する
- キャッシュや配信形式を確認する
- 問題がなければ対象を少しずつ広げる
この流れなら、不具合が起きてもどの段階に原因があるかを切り分けやすくなります。変換方法を途中で増やさず、一つの方法を検証してから次へ進むのがポイントです。
WebPについてよくある疑問
JPEGやPNGはすべてWebPに変えるべきですか
すべて変える必要はありません。すでに十分小さい画像、編集や外部連携で互換性が重要な画像、WebPにすると品質が落ちる画像は、元形式のままでも問題ありません。ページ内で容量の大きい画像や、繰り返し表示される画像から優先して検討します。
WebPにするとSEO順位が上がりますか
WebPという形式だけで検索順位が決まるわけではありません。画像を軽くすることで表示体験の改善にはつながりますが、内容の有用性、ページ構造、モバイルでの使いやすさ、サイト全体の品質なども重要です。形式変更を目的にせず、読者が快適に内容を読める状態を目指します。
WebPでも代替テキストは必要ですか
必要性は画像の役割で決まり、形式とは関係ありません。記事内容を理解するために必要な画像には、文脈に合う簡潔な代替テキストを設定します。装飾目的だけの画像では、読み上げの邪魔にならない扱いが適しています。同じキーワードを機械的に詰め込むのは避けます。
WebPに変換したら元画像より大きくなりました
元画像がすでに適切に圧縮されている、変換時の品質が高すぎる、可逆圧縮を選んでいる、画像の内容が設定に合っていないなどが考えられます。設定を変えて比較し、それでも小さくならなければ元形式を使います。拡張子をWebPに統一すること自体を目的にしないでください。
古いブラウザー向けの対応は必要ですか
現在の主要ブラウザーはWebPに対応しています。ただし、利用者が特殊な古い環境を使う可能性があるサイトや、WebP非対応の外部システムへ画像を渡す場合は確認が必要です。アクセス解析や利用条件を見て、必要ならJPEG・PNGの代替配信を行う仕組みを選びます。
WebPとAVIFはどちらを使えばよいですか
AVIFも高い圧縮効率を狙える画像形式ですが、変換時間、画質、利用環境、編集ツールとの相性が異なります。初心者は、まず運用しやすく主要環境で広く扱えるWebPを少数画像で試し、必要があればAVIFを比較すると分かりやすいでしょう。新しい形式だから常に自分の画像で最小になるとは限りません。
WebPを無理なく使うためのまとめ
WebPは、写真や図解の見た目を必要な範囲で保ちながら、WordPressサイトの画像容量を減らしやすい形式です。非可逆・可逆圧縮、透過に対応し、WordPressでも通常の画像として利用できます。一方、JPEGやPNGをアップロードしただけで自動変換されるわけではなく、サーバーや変換方法の確認が必要です。
まず画像を表示用途に合う寸法へ整え、品質の良い元画像からWebPを作ります。変換前後の容量と見た目を比べ、WordPressへ少数ずつ追加し、メディアライブラリと公開前プレビューで確認してください。元画像とサイトのバックアップを残し、画像最適化の仕組みを重複させないことも大切です。
WebPは目的ではなく、読者が内容を快適に見るための手段です。容量、画質、管理のしやすさのバランスを取り、自分のサイトに合う範囲から段階的に取り入れましょう。
