JA EN

画像 CDN の設定と最適化 - CloudFront, Cloudflare で実現する高速配信

· 約 9 分で読めます

画像 CDN とは - 従来の CDN との違いと導入メリット

画像 CDN (Content Delivery Network) は、通常の CDN のキャッシュ・配信機能に加えて、画像の動的変換 (リサイズ、フォーマット変換、品質調整) をエッジサーバーで実行する専門的なサービスです。従来の CDN が「静的ファイルをそのまま高速配信する」のに対し、画像 CDN は「リクエストに応じて最適化した画像を生成・配信する」点が根本的に異なります。

画像 CDN の主なメリット:

画像 CDN を導入することで、開発者は複数サイズ・複数フォーマットの画像を事前に生成する必要がなくなり、運用コストが大幅に削減されます。元画像を 1 つ管理するだけで、全デバイス・全ブラウザに最適な画像が自動配信される理想的なワークフローが実現します。

CloudFront + Lambda@Edge による画像最適化 - AWS での構築方法

AWS CloudFront と Lambda@Edge を組み合わせることで、独自の画像最適化パイプラインを構築できます。リクエスト時に画像のリサイズ、フォーマット変換、品質調整をエッジで実行し、結果をキャッシュして以降のリクエストに高速に応答します。

アーキテクチャの概要:

URL 設計例: https://cdn.example.com/images/photo.jpg?w=800&h=600&f=webp&q=80

パラメータの意味: w (幅)、h (高さ)、f (フォーマット: webp/avif/jpeg/png)、q (品質: 1-100)

Lambda@Edge の実装では、Sharp ライブラリのレイヤーを事前にビルドして Lambda Layer として登録します。Sharp はネイティブバイナリを含むため、Amazon Linux 2 環境でビルドする必要があります。Docker を使って amazonlinux:2 イメージ内でビルドするのが確実です。メモリは 512MB-1024MB を割り当て、タイムアウトは 5-10 秒に設定します。

Cloudflare Images と Polish - マネージドサービスによる簡易導入

Cloudflare は画像最適化のためのマネージドサービスを複数提供しており、Lambda@Edge のような独自実装なしに画像 CDN を導入できます。設定の手軽さと低コストが魅力です。

Cloudflare の画像最適化機能:

Cloudflare Polish の設定手順:

Polish は既存サイトへの導入が最も簡単な方法です。DNS を Cloudflare に向けるだけで、全画像が自動的に最適化されます。ただし、動的リサイズやアスペクト比の変更はできないため、レスポンシブ画像の完全な最適化には Image Resizing が必要です。

キャッシュ戦略の設計 - ヒット率を最大化する設定

画像 CDN のパフォーマンスはキャッシュヒット率に大きく依存します。キャッシュヒット率が高いほど、エッジサーバーからの高速応答が増え、オリジンへのリクエストと画像変換の実行回数が減少します。目標はキャッシュヒット率 95% 以上です。

キャッシュヒット率を高める設計:

CloudFront のキャッシュポリシー設定では、クエリ文字列をキャッシュキーに含める設定が必要です。「すべてのクエリ文字列を含める」ではなく、画像変換に使用するパラメータ (w, h, f, q) のみをホワイトリストで指定し、不要なパラメータ (トラッキング用の utm_ など) がキャッシュを分割しないようにします。

Client Hints による自動最適化 - ブラウザとの連携

Client Hints は、ブラウザがサーバーにデバイス情報 (画面幅、DPR、ネットワーク速度) を HTTP ヘッダーで送信する仕組みです。画像 CDN がこの情報を活用することで、URL パラメータなしに最適な画像を自動配信できます。

画像最適化に関連する Client Hints ヘッダー:

Client Hints を有効にするには、サーバーから Accept-CH レスポンスヘッダーを送信する必要があります:

Accept-CH: DPR, Viewport-Width, Width

または HTML の <meta> タグで指定します:

<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">

CloudFront では、Client Hints ヘッダーをオリジンに転送するようキャッシュポリシーを設定し、Lambda@Edge でヘッダー値に基づいて画像を変換します。ただし、Client Hints をキャッシュキーに含めるとキャッシュが細分化されるため、DPR は 1x/2x/3x の 3 段階に丸め、Viewport-Width はバケット化して使用します。

注意点として、Client Hints はクロスオリジンリクエストではデフォルトで送信されません。画像 CDN が別ドメインの場合、Permissions-Policy ヘッダーで明示的に許可する必要があります。

クラウドインフラの関連書籍も Amazon で探せます

モニタリングとコスト最適化 - 運用時の監視ポイント

画像 CDN を運用する際は、パフォーマンス指標とコストの両面を継続的に監視し、最適な状態を維持することが重要です。設定ミスや想定外のトラフィックパターンにより、コストが急増したりパフォーマンスが低下したりするリスクがあります。

監視すべき主要指標:

コスト最適化のテクニック:

関連記事

画像の遅延読み込み実装ガイド - loading=lazy と IntersectionObserver の使い分け

Web ページの初期表示速度を改善する画像遅延読み込みの実装方法を、ネイティブ API と JavaScript の両アプローチで解説します。

Web 用画像のファイルサイズ最適化戦略 - 品質を保ちながら軽量化する技術

Web パフォーマンスを最大化するための画像ファイルサイズ最適化手法を、フォーマット選択からメタデータ除去まで体系的に解説します。

大規模サイトの画像配信アーキテクチャ - 設計パターンと実装

月間数億 PV 規模のサイトで求められる画像配信アーキテクチャを解説。CDN 設計、オリジン構成、動的変換、キャッシュ戦略の実践的なパターンを紹介します。

画像キャッシュ戦略の完全ガイド - Cache-Control, ETag, CDN の最適設定

Web サイトの画像配信を高速化する Cache-Control、ETag、CDN キャッシュの設定方法を解説。キャッシュ無効化戦略とバージョニングの実装パターンを具体例とともに紹介します。

コンテントネゴシエーションで最適な画像を配信 - Accept ヘッダーと CDN の連携

HTTP コンテントネゴシエーションを活用し、ブラウザの対応フォーマットに応じて WebP や AVIF を自動配信する仕組みを解説。CDN 設定と Vary ヘッダーの正しい運用方法を紹介します。

画像変換 API の設計パターン - URL ベース、リクエストボディ、非同期処理の比較

画像変換 API を設計する際のアーキテクチャパターンを解説。URL パラメータ方式、REST API 方式、非同期キュー方式の特性を比較し、スケーラブルな設計指針を提示します。

関連用語