2026年版 WordPress 画像最適化：スピードとSEO対策

最終更新日: June 28, 2026

WordPressの画像は、ページが遅く読み込まれる最大の原因となることがよくあります。アップロード前にWebPに圧縮し、表示幅を制限し、lazy loadingとレスポンシブなsrcsetを有効にし、CDNを前面に配置してください。このスタックのおかげで、メディア量の多いブログのLargest Contentful Paintが3.8sから1.1sに低下しました。私はこのワークフローで100以上のWordPressサイトを最適化してきたため、残りのページでは私が実際に変更したすべての設定について解説します。

簡単な回答：まず何を修正すべきですか？

画像をWebPに圧縮してからアップロードし、表示幅を1920pxに制限し、各ファイルを200KB未満に保ち、lazy loadingとレスポンシブなsrcsetを有効にし、CDNを前面に配置してください。ShortPixel（またはEWWW）でアップロード時の変換を行い、エッジ配信にはCloudflareを使用します。画像は典型的なブログのページサイズの60%から80%を占めるため、改善効果が最も出るのがこの部分です。

なぜWordPressの画像が速度低下の原因になるのか？

典型的なブログでは、画像がページサイズの60%から80%を占めます。画像を修正する前と後で同じWooCommerceストアを測定したところ、合計ページサイズは9.4MBから1.1MBに減少し、モバイルのPageSpeedスコアは31から78に急上昇しました。

私がよく目にする一般的な原因：

• スマートフォンから直接アップロードされた4MBのカメラJPEG
• WebPであればサイズの四分の一で済むのにPNGを使用している場合
• 2560pxのファイルを375pxのスマートフォン向けに配信している単一ファイル
• lazy loadingがないため、ブラウザがすべての画像を一度にダウンロードしてしまう

WordPressは現在良いデフォルト設定を持っていますが、6MBの写真のアップロードを止めてくれるわけではありません。その部分はあなた次第です。

アップロード前にどのようにリサイズしますか？

この単一の手順が、どのプラグインよりも効果を発揮します。実際に表示する最大のサイズにリサイズしてから、圧縮を行います。ほとんどのコンテンツ画像は1600pxから1920pxの幅が適切です。

私のアップロード前ルーティン：

1. バッチを最大1920pxのリサイザーに入れる。
2. WebP形式で品質80に変換する。
3. 出力が200KB未満であることを確認する。
4. その後、WordPressにアップロードする。

完全なサイズ設定のロジックについては、resize images for web guideがブレークポイントを網羅しており、batch resize guideはフォルダ全体を一括で処理します。

WebPとAVIFにどのように変換しますか？

WebPは同等の品質でJPEGより25%から35%小さいサイズであり、WordPress coreではバージョン6.5以降サポートされています。AVIFはさらにWebPよりも20%から30%小さく圧縮されますが、ブラウザやエディタのサポート状況はまだ不安定です。

私はヒーロー画像を両方の形式に圧縮し、CDNに交渉を任せます。Google自身のガイダンスでは、可能な限り最新のフォーマットで配信することが推奨されています — use modern image formats on web.devを参照してください。

すでにオンラインにある大量のPNGがある場合は、PNG to WebP converterを使って、URLを壊さずにバッチ変換を行うことができます。

どの圧縮プラグインを使うべきですか？

私は同じ1,200枚の画像ライブラリを主要なすべてのプラグインで圧縮しました。正直なトレードオフを以下に記載します — どれも私にお金は払いません。

ShortPixel Image Optimizerが最初にインストールするものです。グロッシー圧縮（Glossy compression）は目視では全く同じように見え、WebPとAVIFを自動生成し、それらを配信するためにマークアップを書き換えます。無料プランは月100枚で、テストするには十分ですが、実際のバックログをクリーンにするには足りません。

Smushはインターフェースがすっきりしておりデフォルト設定も良いですが、無料ティアではWebPへの変換が行われません — これはProの有料ウォールベヒアンスにあります。すでに支払いをしているなら問題ありませんが、そうでない場合は制限されます。

EWWW Image Optimizerは、大量のサイトには私のお気に入りです。無料で無制限のローカル画像を最適化し、CDNとexactDNのみで料金が発生します。設定はShortPixelよりも手間がかかります。

ImagifyはWP Rocketとの統合が密接であり、シンプルな3段階のスライダーがあります。圧縮品質はしっかりしていますが、月間のクレジット上限が大規模なストアにとって主な制約となります。

レスポンシブなsrcsetを実際に機能させるにはどうすればいいですか？

WordPressは、サムネイル、ミディアム、ラージなどいくつかの中間サイズを自動で生成し、srcsetを出力します — ただし、テーマがハードコーディングされた<img>タグではなくwp_get_attachment_image()を使用している場合に限ります。

WordPressが出力するマークアップの例：

<img
  src="hero-1536x800.webp"
  srcset="hero-768x400.webp 768w,
          hero-1200x628.webp 1200w,
          hero-1536x800.webp 1536w"
  sizes="(max-width: 768px) 100vw, 1200px"
  loading="lazy"
  width="1536" height="800"
  alt="Storefront hero image">

確認方法：DevToolsを開き、Slow 4Gに制限し、リロードしてNetworkタブを確認します。スマートフォンは1536wではなく768wファイルを要求するはずです。すべてのデバイスが同じファイルを読み込む場合、テーマが壊れているか、ページビルダーがレスポンシブなマークアップをバイパスしています。

lazy loadingをオンにするにはどうすればいいですか？

WordPress 5.5以降、すべての<img>にデフォルトでloading="lazy"が適用され、6.1では最初の大きな画像にfetchpriority="high"ヒントが追加されたため、lazy loaderとの競合を防ぎます。現在ではプラグインが必要になることはほとんどありません。

公式のWordPress lazy-loading documentationには、LCP画像を例外とする場合や、iframeをlazy loadする場合のフィルターが記載されています。より深い仕組みは、lazy load imagesの記事にあり、ファーストビュー以上のヒーロー画像をlazy loadingするという一般的な間違いについても触れています。

CDNはどのように画像の読み込み時間を短縮するのか？

CDNは、訪問者に最も近いエッジからファイルを配信し、オリジンからの往復回数を削減します。あるクライアントを、オリジンホストのJPEGからCloudflare plus Polishに切り替えたところ、シンガポールとブラジルでの画像に関するTTFBが420msから60msに低下しました。

私が設定する内容：

• Polish付きのCloudflare（ロスレスplus WebP）。
• /wp-content/uploads/内のすべてをキャッシュする。
• 画像MIMEタイプに対して1年間のブラウザキャッシュを設定する。
• S3に依存している場合にのみWP Offload Mediaを使用する。

キャッシュヘッダーやパージルールを含む完全なセットアップについては、image CDN guideが詳細を解説しています。フォーマットのトレードオフはWebP vs AVIF comparisonに記載されています。

core WordPressのWebPサポートで十分ですか？

部分的にのみです。バージョン6.5以降、WebPを直接アップロードでき、WordPressがリサイズ処理を行うため素晴らしいです。しかし、coreは既存のJPEGを変換せず、AVIFを自動生成せず、ブラウザごとにフォーマットを交渉しません。プラグインまたはCDNがその作業を行います。

今日、全く新しいサイトを立ち上げ、WebPのみをアップロードする場合、coreだけで本当に十分です。それより古いすべてのサイト（ほぼすべて）の場合、プラグイン層が必要です。継続的なメディアの変更については、WordPress core field notesを参照してください。

納品前のパフォーマンスチェックリスト

• すべてのコンテンツ画像が200KB未満である。
• WebPがJPEGフォールバック付きで配信されている。
• ヒーローにfetchpriority="high"が設定され、loading="lazy"ではない。
• srcsetが存在し、スマートフォンが小さいファイルを読み込む。
• CDNが/wp-content/uploads/をキャッシュしている。
• Altテキストが画像の内容を18文字から140文字で説明している。
• PageSpeedのLCPが2.5s未満、CLSが0.1未満である。

まとめ

リサイズし、WebPに圧縮し、WordPressとプラグインにレスポンシブなsrcsetを構築させ、ファーストビューの下部をlazy loadし、エッジでキャッシュします。ShortPixelとCloudflareは私が最初に手を伸ばすスタックであり、ライブラリが巨大で予算がゼロの場合にはEWWWを選びます。

唯一の注意点：積極的なロッシー圧縮は、テクスチャが重要な製品写真やRetinaディスプレイで最終的にあなたを苦しめます。私はオリジナルファイルをクラウドストレージに保持し、そこから再エクスポートします。なぜなら、一度ロスのあるコピーでソースを上書きしてしまうと、ディテールは永遠に失われてしまうからです。

よくある質問

WordPress 6.5は画像最適化プラグインを不要にしますか？

最初からWebPのみをアップロードする全く新しいサイトの場合のみです。core 6.5はWebPのアップロードをリサイズし、レスポンシブなサイズを配信しますが、既存のJPEGライブラリを変換したり、AVIFを生成したり、ブラウザごとのフォーマット交渉を行ったりはしません。既存のメディアライブラリを持つサイトには、依然としてプラグインまたはCDNが必要です。

最も優れた無料のWordPress画像最適化ツールは何ですか？

EWWW Image Optimizerの無料ティアは、有料APIなしで圧縮とWebP変換をカバーします。ShortPixelは月100枚の無料画像を提供し、小規模サイトに適しています。予算ゼロで大規模なライブラリの場合、EWWWが実用的なデフォルトです。自動化やAVIFが必要な場合は、ShortPixelまたはImagifyの有料ティアが価値があります。

WordPressでWebPとAVIFのどちらを配信すべきですか？

万能のデフォルトとしてWebPを使用し、エンコードでき、オーディエンスが主に最新のブラウザを使用している場合はAVIFを使用します。WebPはどこでも機能しますが、AVIFは同等に約50%小さいですが、エンコードが遅く、一部の古いブラウザをスキップします。両方をカバーするために、<picture>要素を通じてWebPフォールバック付きでAVIFを配信してください。

WordPressは画像を圧縮しますか？

はい — WordPressはすべてのアップロードに対して複数のリサイズバージョンを生成し、軽い圧縮を適用します。しかし、フォーマットの変換（6.5以降のWebP以外）、積極的な最適化、メタデータの削除は行いません。これらのステップはプラグインが処理します。

最適なWordPress画像最適化スタックは何ですか？

ShortPixel（圧縮とWebP/AVIF）にCloudflare（エッジ配信）を組み合わせたものが私が最初に手を伸ばすスタックです。ライブラリが巨大で予算がゼロの場合にはEWWWを使います。この組み合わせは、圧縮、最新フォーマット、およびエッジキャッシュを処理します。オリジナルファイルはクラウドストレージに保持し、そこから再エクスポートしてください。なぜなら、ソースをロスのあるコピーで上書きすると、ディテールは永遠に失われてしまうからです。

画像クレジット

• WordPressの紙ラベルが付いたヴィンテージタイプライター — photo by Suzy Hazelwood on Pexels
• WordPressサイトを編集するためのホームオフィスラップトップワークスペース — photo by cottonbro studio on Pexels
• きれいな机の上でウェブサイトのチェックアウトページをプレビューするラップトップ — photo by Caio on Pexels
• [コードと画像編集ソフトウェアを示すデュアルスクリーン