JA EN

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

· 約 9 分で読めます

コンテントネゴシエーションとは - HTTP の仕組みで最適フォーマットを選択

コンテントネゴシエーション (Content Negotiation) は、HTTP プロトコルの標準機能を使い、クライアントとサーバーが最適なレスポンス形式を交渉する仕組みです。画像配信においては、ブラウザが対応する画像フォーマットをサーバーに伝え、サーバーが最も効率的なフォーマットで応答します。

動作の流れ:

利点: HTML の <picture> 要素による分岐と異なり、URL を変更せずにフォーマットを切り替えられます。既存の <img src="photo.jpg"> をそのまま維持しながら、対応ブラウザには WebP や AVIF を配信できるため、HTML の変更が不要です。

ブラウザの Accept ヘッダー例:

Safari は 2023 年の iOS 16 / macOS Ventura から WebP に対応し、AVIF は Safari 16.4 以降で対応しています。

サーバーサイドでの実装 - Nginx と Apache の設定例

Web サーバーでコンテントネゴシエーションを実装する方法を、Nginx と Apache それぞれの設定例で解説します。

Nginx の設定:

map $http_accept $img_suffix {
default "";
"~image/avif" ".avif";
"~image/webp" ".webp";
}

server {
location ~* ^(.+)\.(jpe?g|png)$ {
set $base $1;
set $ext $2;
add_header Vary Accept;
try_files $base$img_suffix.$ext $uri =404;
}
}

この設定では、Accept ヘッダーに image/avif が含まれていれば .avif 版を、image/webp が含まれていれば .webp 版を優先的に返します。該当ファイルが存在しない場合は元の JPEG/PNG にフォールバックします。

Apache の設定 (.htaccess):

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/avif
RewriteCond %{REQUEST_FILENAME}.avif -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.avif [T=image/avif,L]

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,L]

Header append Vary Accept

重要な注意点: Vary: Accept ヘッダーを必ず付与してください。これがないと、CDN やプロキシが AVIF 版をキャッシュし、WebP しか対応しないブラウザにも AVIF を返してしまう事故が発生します。

CDN でのコンテントネゴシエーション - CloudFront と Cloudflare の設定

CDN を使用する場合、コンテントネゴシエーションの設定は CDN 側で行うのが効率的です。エッジサーバーでフォーマット判定を行うことで、オリジンへのリクエストを最小化できます。

CloudFront の設定:

CloudFront Functions の実装例:

function handler(event) {
var request = event.request;
var accept = request.headers.accept ? request.headers.accept.value : '';
var uri = request.uri;
if (uri.match(/\.(jpe?g|png)$/i)) {
if (accept.includes('image/avif')) {
request.uri = uri + '.avif';
} else if (accept.includes('image/webp')) {
request.uri = uri + '.webp';
}
}
return request;
}

Cloudflare の設定: Cloudflare の Polish 機能を有効にすると、WebP への自動変換がエッジで行われます。Pro プラン以上では AVIF 変換も利用可能です。Transform Rules でカスタムロジックを実装することも可能です。

Vary ヘッダーの正しい運用 - キャッシュ事故を防ぐ

Vary ヘッダーはコンテントネゴシエーションの正確なキャッシュ動作を保証する重要な要素です。設定を誤ると、間違ったフォーマットがキャッシュから配信される深刻な事故が発生します。

Vary ヘッダーの役割: Vary: Accept は「このレスポンスは Accept ヘッダーの値によって異なる内容を返す」ことをキャッシュに伝えます。CDN やプロキシはこの情報を元に、Accept ヘッダーの値ごとに別々のキャッシュエントリを保持します。

よくある事故パターン:

Accept ヘッダーの正規化: ブラウザごとに Accept ヘッダーの値が微妙に異なるため (品質値の有無、順序の違いなど)、そのままキャッシュキーにすると同じフォーマットに対応するブラウザでも別キャッシュになります。CDN のエッジで Accept ヘッダーを avif、webp、default の 3 値に正規化することで、キャッシュヒット率を最大化できます。

テスト方法: curl -H "Accept: image/webp" -I https://example.com/photo.jpg でレスポンスヘッダーを確認し、Content-Type: image/webp と Vary: Accept が返ることを検証します。異なる Accept ヘッダーで複数回リクエストし、正しいフォーマットが返ることを確認してください。

picture 要素との比較と使い分け - クライアントサイド vs サーバーサイド

画像フォーマットの出し分けには、HTML の <picture> 要素によるクライアントサイド方式と、コンテントネゴシエーションによるサーバーサイド方式の 2 つがあります。それぞれの特徴を理解し、適切に使い分けることが重要です。

picture 要素 (クライアントサイド):

<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="写真">
</picture>

比較表:

推奨する使い分け:

Web 配信技術の書籍は Amazon でも入手できます

トラブルシューティングと監視 - 本番環境での運用

コンテントネゴシエーションは正しく設定すれば透過的に動作しますが、設定ミスや CDN の挙動変更により問題が発生することがあります。本番環境での監視とトラブルシューティング手法を紹介します。

よくある問題と対処法:

監視の実装:

フォールバックの確実性: コンテントネゴシエーションの最も重要な要件は、対応フォーマットがない場合に確実に元画像 (JPEG/PNG) にフォールバックすることです。新しいフォーマットの追加時は、フォールバックパスが壊れていないことを必ずテストしてください。エッジケースとして、Accept ヘッダーが空のリクエスト (一部のボットやプロキシ) にも正しく応答できることを確認します。

関連記事

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

画像 CDN の仕組みと設定方法を解説。CloudFront や Cloudflare を使った画像の高速配信、動的リサイズ、フォーマット変換、キャッシュ戦略を実践的に紹介します。

次世代画像フォーマットの展望 - JPEG XL と WebP2 が変える未来

JPEG XL、WebP2、AVIF など次世代画像フォーマットの技術的特徴と将来性を比較分析。各フォーマットの圧縮性能、ブラウザ対応状況、移行戦略を詳しく解説します。

WebP から AVIF への移行判断 - コスト対効果と実装戦略

WebP 導入済みサイトが AVIF に移行すべきかの判断基準を解説。追加の圧縮効果、移行コスト、段階的な実装戦略を具体的なデータとともに紹介します。

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

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

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

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

AVIF 導入ガイド - ブラウザ対応状況とフォールバック戦略の実践

AVIF フォーマットの導入方法を実践的に解説。ブラウザ対応状況、picture 要素によるフォールバック、エンコード設定の最適値を具体的に紹介します。

関連用語