「画像が重くてページが遅い」「PageSpeed InsightsのLCPスコアが"要改善"のまま改善しない」こんな課題に直面したことがありませんか？

ページ表示速度の低下原因として最も多いのが「画像」です。

Webページの転送データのうち最大50%以上を画像が占めるとされており、適切に最適化するだけで表示速度は劇的に改善します。

本記事では、CDNを使った画像の改善方法を具体的に解説します。

ページ速度改善ツールのLanding HubならCDNにも対応しています。

CDNでできる画像最適化

次世代フォーマットへの自動変換（WebP・AVIF）

JPEG・PNGのまま配信し続けると、不要に重い画像がページのLCPを悪化させます。

最も即効性の高い対策が「WebP」と「AVIF」への自動変換です。

WebPはJPEGよりファイルサイズを約25〜35%削減でき、AVIFはさらに高圧縮で約40〜55%の削減が可能です。

画質の劣化はほぼなく、ユーザー体験を損なわずにページを軽量化できます。

画像CDNを使えば、アクセスしたブラウザを自動判別し「AVIF→WebP→JPEG」の順でフォールバック配信します。

URLパラメータに?format=autoを追加するだけで設定が完結するため、エンジニアへの依頼なしに全画像の最適化が即日実現できます。

ブラウザ・デバイスに応じた動的リサイズ

スマートフォンに対してデスクトップ向けの大きな画像をそのまま配信していると、データ転送量が無駄に増え、表示速度の低下を招きます。

デバイスごとに最適なサイズの画像を届けることが、表示速度改善の重要な一手です。

画像CDNを使えば、URLパラメータにサイズを指定するだけで、リクエストのたびに最適なサイズへ動的にリサイズして配信します。

たとえば?w=400と指定すれば幅400pxの画像を自動生成し、モバイル向けに軽量配信が可能です。

元の画像は1枚アップロードするだけでよく、デバイスごとに複数枚を用意する手間が不要になります。

制作・運用コストを大幅に削減しながら、あらゆる端末で最速表示を実現できます。

画質調整（品質パラメータ）の自動最適化

画像ファイルサイズを削減する最も簡単な方法は圧縮率を上げることですが、画質が劣化しすぎるとUXを損ないます。

画像CDNには「人間の目には劣化が気にならないギリギリのライン」を自動判定する機能があります。

quality=auto を指定することで、画像の内容（写真か、イラストか、テキストが含まれるか）に応じて、ロッシー（非可逆）圧縮とロスレス（可逆）圧縮を使い分けたり、最適な圧縮率を自動選定します。

URLパラメータ例： ?quality=auto/?q=75

レスポンシブ対応（srcset・sizesの生成）

HTMLのsrcset属性とsizes属性を使用することで、ブラウザが画面幅に応じて最適な画像を選択してダウンロードするようになります。

従来はデバイスごとに複数サイズの画像を事前に用意する必要がありましたが、画像CDNを使えばその手間が不要になります。

1枚の元画像に対してURLパラメータでサイズを変えたURLを並べるだけで、ブラウザが画面幅に応じて最適な画像を自動で選択・取得します。

変換されるコード例

<img
  srcset="https://cdn.example.com/img.jpg?w=400 400w,
          https://cdn.example.com/img.jpg?w=800 800w,
          https://cdn.example.com/img.jpg?w=1200 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  src="https://cdn.example.com/img.jpg?w=800"
  alt="説明文"
>

制作工数を増やさずにレスポンシブ対応が完結するため、スマートフォン・タブレット・デスクトップのすべての環境で最速表示を実現できます。

参考：レスポンシブ画像

エッジキャッシュによる高速配信

画像CDNの真価は、最適化された画像を世界中に分散配置された「エッジサーバー」にキャッシュすることにあります。

ユーザーから地理的に近いエッジサーバーから画像が配信されるため、物理的な距離による遅延（レイテンシ）が解消され、TTFB（Time To First Byte）が劇的に短縮されます。

「軽量化された画像」を「近距離から配信」するという2重の効果で、表示速度が最大化されます。

クロップ・トリミング・フォーカル設定

デバイスによって表示領域のアスペクト比が異なる場合、同じ画像でもスマートフォンでは横長、デスクトップでは正方形など、用途に応じたトリミングが必要になります。

従来はデザイナーや制作担当者が手動で切り出し作業を行う必要があり、工数がかかる課題がありました。

画像CDNのクロップ・トリミング機能を使えば、URLパラメータを指定するだけでリアルタイムに切り出しが可能です。

さらにフォーカルポイント設定（?crop=focalpoint）を活用すれば、人物の顔やロゴなど重要な被写体を中心に自動でトリミングされるため、どのデバイスでも意図した見せ方を維持できます。

制作の手戻りをなくしながら、あらゆる表示環境に最適化された画像を自動で届けられます。

CDNの画像最適化の導入手順

「画像CDNによる最適化は効果的とわかっていても、導入の手順がわからない」という担当者は少なくありません。

まずは現状の課題を診断し、次にCDNサービスへ接続、最後にURLを切り替えるだけで対応できます。

それぞれの手順を順を追って解説します。

CDNサービスのアカウント作成・準備

導入前にまず自社サイトの状況を整理しましょう。

サービス選定の前に確認すべきポイント

画像の配信元（オリジンサーバー・S3・外部ストレージなど）、月間リクエスト数の目安、対応が必要なCMSの種類を把握しておくことで、最適なCDNサービスを選びやすくなります。

無料トライアルが用意されているサービスが多いため、実際に動作を確認してから本契約に進むのが安全です。

主要CDNサービス 特徴比較表

注意点： 料金体系はリクエスト数・転送量・変換回数などサービスにより異なります。

月間の画像リクエスト数を事前に試算し、想定コストを確認してから契約しましょう。

無料枠を超えた際の上限設定ができるサービスを選ぶと安心です。

CDNサービスへの接続とURLの切り替え

オリジンURLとCDN URLの対応関係

CDNを導入する際の基本的な仕組みは、既存の画像URLをCDN経由のURLに置き換えることです。

オリジンサーバーに保存されている画像をそのまま残した状態で、CDNのエンドポイントURLをプレフィックスとして付加するだけで配信経路が切り替わります。

HTMLやCSSのsrc属性のURLをCDN URLに変更すれば、以降のリクエストはすべてCDN経由で最適化された状態で配信されます。

一括置換ツールやCMSのプラグインを活用することで、既存ページへの影響を最小限に抑えながら段階的に切り替えられます。

既存の画像ファイルを移行・削除する必要はなく、URLの向き先を変えるだけで導入が完結します。

CDNで設定したい項目一覧

設定のポイントと注意点

CDNの設定において最も重要なのは、パラメータを組み合わせて「フォーマット変換・リサイズ・品質調整」を同時に適用することです。

特に?format=autoは必ず有効にしましょう。

ブラウザごとに最適なフォーマットを自動で選択するため、設定しないままでは最適化の恩恵が半減します。

またキャッシュのTTL（有効期限）は短すぎるとエッジキャッシュが効かず、速度改善の効果が下がります。

静的な画像は1日〜1週間程度のTTLが推奨です。

画像を更新した際はキャッシュを手動でパージする運用フローを事前に決めておくことが重要です。

画像CDN最適化の優先順位と注意点

画像CDN最適化の優先順位

画像CDN最適化は多くの施策を同時に実施できますが、すべてを一度に対応しようとすると工数が分散し、効果の出るまでに時間がかかります。

まずは表示速度への影響が大きく、設定コストの低い施策から着手することが重要です。

特にLCPに直結するファーストビューの画像最適化を最優先にし、そこから順に全体へ展開していくアプローチが最も効率的です。

効果を測定しながら段階的に施策を広げることで、リソースを無駄にせず確実に改善できます。

よくある失敗と注意点

失敗①：LCP画像にLazy Loadを設定してしまう

ファーストビューに表示されるヒーロー画像や大きなバナー画像にloading="lazy"を設定すると、ブラウザが画像の読み込みを意図的に遅らせるためLCPが大幅に悪化します。

Lazy Loadはスクロール後に表示される画像に使う技術であり、最初から表示される画像には逆効果です。

ファーストビュー内の画像には必ずloading="eager"とfetchpriority="high"を設定してください。

ソース例

<!-- 正しい設定：ファーストビュー内の画像 -->
<img src="https://cdn.example.com/hero.jpg?format=auto"
     loading="eager"
     fetchpriority="high"
     alt="メインビジュアル">

<!-- 正しい設定：ファーストビュー外の画像 -->
<img src="https://cdn.example.com/image.jpg?format=auto"
     loading="lazy"
     alt="コンテンツ画像">

失敗②：width／heightを未指定のままにしてしまう

画像のwidthとheight属性を省略すると、ブラウザは画像が読み込まれるまでレイアウト上のサイズを確保できません。

その結果、画像の表示後にページ全体のレイアウトがずれるCLS（累積レイアウトシフト）が発生し、Core Web Vitalsのスコアを悪化させます。

CDNでリサイズしたサイズに合わせて、必ずwidthとheightを明示的に指定してください。

<!-- 悪い例：width/heightの省略 -->
<img src="https://cdn.example.com/image.jpg?w=800" alt="説明">

<!-- 良い例：width/heightを明示 -->
<img src="https://cdn.example.com/image.jpg?w=800"
     width="800"
     height="450"
     alt="説明">

失敗③：キャッシュTTLを短く設定しすぎる

キャッシュの有効期限（TTL）を短く設定しすぎると、エッジサーバーのキャッシュがすぐに失効し、リクエストのたびにオリジンサーバーへアクセスが発生します。

その結果、CDNによる配信速度の改善効果が半減し、オリジンサーバーへの負荷も増大します。

更新頻度の低い静的画像はCache-Control: max-age=86400（1日）以上を推奨します。

画像を更新した際は手動でキャッシュをパージする運用フローを事前に決めておきましょう。

キャッシュの目安

• 静的画像（ロゴ・アイコン等）→　max-age=604800（1週間）
• 更新頻度が低い画像→　max-age=86400 （1日）
• 更新頻度が高い画像→　max-age=3600 （1時間）

上記の目安を参考に設定してみてください。

失敗④：format=autoをオフにしてJPEGを指定し続ける

CDNを導入したにもかかわらず、画像フォーマットをJPEGで固定したまま配信し続けると、WebPやAVIFへの自動変換が機能しません。

ブラウザが次世代フォーマットに対応していても最適化の恩恵が受けられず、ファイルサイズの削減効果が失われます。

特別な理由がない限り?format=autoを必ず有効にし、導入後はPageSpeed Insightsで「次世代フォーマット」の警告が消えているか確認してください。

<!-- 悪い例：フォーマットをJPEGで固定 -->
<img src="https://cdn.example.com/image.jpg?fm=jpg" alt="説明">

<!-- 良い例：フォーマット自動選択 -->
<img src="https://cdn.example.com/image.jpg?format=auto" alt="説明">

よくある質問（FAQ）

Q1. 画像CDN最適化と手動圧縮ツールの違いは何ですか？

A1. 手動圧縮ツールは「アップロード前に1回だけ圧縮」しますが、
    画像CDN最適化は「ユーザーのブラウザ・デバイスに合わせて
    毎回動的に最適化」します。1枚の原稿から複数の最適化バージョンを
    自動生成できる点が最大の違いです。

Q2. 既存サイトへの導入に大きな改修が必要ですか？

A2. 基本的にはHTMLのimgタグのsrc URLを
    CDNのURLに変更するだけで導入できます。
    WordPressの場合はプラグインや設定変更のみで対応可能なケースが多いです。

Q3. どのくらいの効果が期待できますか？

A3. web.devのデータによれば、画像CDN導入で
    ファイルサイズを40〜80%削減できるケースがあります。
    LCPの改善幅はサイトにより異なりますが、
    ファーストビュー画像のフォーマット変換＋CDN配信の組み合わせで
    0.5〜2秒の改善が見込まれます。

Q4. WordPressサイトでも対応できますか？

A4. 対応できます。プラグインやCDNのWordPress向けの
    設定機能を使うことで、imgタグのURLを
    自動的にCDN経由のURLに書き換えられます。

Q5. 動画・音声ファイルも最適化できますか？

A5. 画像CDNは基本的に静止画像（JPEG・PNG・WebP・AVIF・GIF等）に特化しています。
    動画ファイルは動画専用のCDNや配信ソリューション（例：動画変換CDN）が別途必要です。

Q6. 費用はどのくらいかかりますか？

A6. サービスにより異なりますが、
    従量課金型（リクエスト数・転送量に応じた課金）と
    月額固定型があります。BtoBの中規模サイトであれば
    月額数万円〜が目安です。無料トライアルを活用して効果を確認してから導入するのが安全です。

CDNでできる画像最適化まとめ

画像CDNを活用した最適化は、WebP/AVIF自動変換・動的リサイズ・品質調整・レスポンシブ対応・エッジキャッシュ配信など、表示速度改善に直結する施策をURLパラメータの設定だけで自動化できる手法です。

手動での画像圧縮や複数サイズの用意といった煩雑な作業が不要になるため、エンジニアや制作担当者の工数を大幅に削減しながら、あらゆるデバイスで最速表示を実現できます。

まずはPageSpeed Insightsで自社サイトの現状を診断し、LCPに直結するファーストビューの画像最適化から着手してみてください。

小さな一歩が、サイトのパフォーマンスとビジネス成果を大きく変えるきっかけになります。