2026年5月28日

WordPressでFastly Image Optimizerを設定する方法

メディア・画像

WordPress の画像を Fastly Image Optimizer（Fastly IO）で変換・圧縮するには、Fastly のサービスで IO を有効にし、画像へのリクエストに x-fastly-imageopto-api ヘッダーを付けたうえで、WordPress 側では Fastly の公式プラグインの IO 設定を使うか、画像 URL に width などのパラメーターを付けて配信します。IO はプラグインを入れるだけでは動かず、Fastly 側での有効化とシールド（Shielding）の設定が前提です。この記事では、事前準備、Fastly 側とWordPress 側の設定、動作の確認方法、つまずきやすい点を順に説明します。

Fastly Image Optimizerの仕組み

Fastly IO は、オリジン（WordPress のサーバー）にある元画像を Fastly のエッジで変換し、変換後の画像をキャッシュして配信する機能です。変換の内容は URL のクエリパラメーターで指定します。

https://example.com/wp-content/uploads/2026/10/photo.jpg?width=800&format=auto&quality=80

この例では、幅 800px に縮小し、ブラウザーが対応している形式を自動で選び、画質 80 で出力します。WordPress は画像をアップロードすると複数のサイズを生成しますが、IO を使えば1枚の元画像から必要なサイズをエッジで作れるため、サーバーのディスクや画像処理の負荷を抑えられます。

IO はキャッシュできるリクエストだけを処理します。サービスの設定で画像へのリクエストがキャッシュ対象外（パス）になっていると変換されない、という前提を覚えておくと、確認時の混乱を避けられます。

事前に必要なもの

Fastly のサービス: WordPress サイトが Fastly 経由で配信されていること。サイトのドメインが Fastly を向いていない状態では IO は使えません。
IO の利用契約: IO は追加のオプション機能で、アカウントで利用できる状態になっている必要があります。費用や契約条件は Fastly に確認してください。AVIF への変換など一部の機能は上位の契約が必要とされています（2026年10月現在）。
シールドの設定: Fastly の公式ドキュメントでは、IO を使うサービスにはシールドの設定が求められています。シールドの拠点は、オリジンのサーバーに地理的に近い場所を選びます。日本のサーバーなら、国内の拠点が候補になります。
API トークン: WordPress のプラグインから Fastly を操作する場合に必要です。

作業前に、Fastly のサービス設定は現在の有効なバージョンを複製（クローン）してから編集してください。Fastly ではバージョンごとに設定が管理されるので、問題があれば以前のバージョンを有効にし直せます。

Fastly側でIOを有効にする

サービスでIOを有効化する

利用契約があれば、Fastly の管理画面で対象のサービスの IO を有効にできます。管理画面の表記は変わることがあるため、見当たらない場合は Fastly のサポートに有効化を依頼してください。

画像リクエストにヘッダーを付ける

IO で処理させたいリクエストに x-fastly-imageopto-api ヘッダーを付けます。WordPress の画像だけを対象にするなら、拡張子で判定するのが分かりやすい方法です。カスタム VCL か VCL スニペットで、vcl_recv に次の内容を追加します。

if (req.url.ext ~ "(?i)^(?:gif|png|jpe?g|webp)$") {
  set req.http.x-fastly-imageopto-api = "fastly";
}

管理画面の「ヘッダー」設定で、種類をリクエスト、操作を設定（Set）、宛先を http.x-fastly-imageopto-api、値を "fastly" として作成する方法もあります。

公式ドキュメントでは、このヘッダーはエッジとシールドの両方で付ける必要があるとされています。エッジでしか付けないとシールド側で処理されず、画像が変換されないままになります。VCL スニペットの vcl_recv に書いた内容は両方で実行されるので、条件分岐でシールド側を除外していないかを確認してください。

また IO は、認識しないクエリパラメーターを既定で取り除いてからオリジンに送ります。画像 URL にキャッシュ対策用の ?ver= などを付けている場合も、オリジンにはパラメーターなしで届く点を覚えておいてください。

WordPress側の設定

方法1: Fastly公式プラグインのIO設定を使う

Fastly は WordPress 向けのプラグイン「Fastly」を WordPress.org で公開しています。投稿を更新したときにキャッシュを自動で削除（パージ）する機能が中心ですが、IO の設定も含まれています。

「プラグイン」→「新規追加」で「Fastly」を検索し、作者が Fastly のものをインストールして有効化します。
管理画面の「Fastly」→「General」で、API トークンとサービス ID を入力して保存し、「TEST CONNECTION」で接続を確認します。プラグインの説明では、トークンの作成時にグローバルな API アクセス権を選ぶよう案内されています。
「Fastly」→「Advanced」にある Image Optimization の項目を設定します。

IO 関連の主な項目は次のとおりです。

Fastly の設定で IO を有効にする項目: オンにすると、必要なヘッダーを付ける VCL をサービスにアップロードし、新しいバージョンを有効化します。前述の VCL を自分で書いた場合は、重複しないよう注意してください。
WordPress で IO を有効にする項目: ほかの IO 設定を動かすための主スイッチです。
適応的なピクセル比の項目: 画像の srcset を IO が処理できる形式に書き換え、生成するピクセル比を指定します。
本文中の画像にも IO を使う項目: アイキャッチ画像などとは別に、本文中の画像を対象にするかどうかを選びます。効果を出すには、本文にフルサイズの画像を挿入するよう案内されています。

注意点として、このプラグインは WordPress.org のページで「最新の3つのメジャーリリースでテストされていない」旨の表示が出ています（2026年10月現在）。使う場合はステージング環境で、管理画面の動作、パージ、画像の表示を一通り確認してから本番に入れてください。グローバルな API 権限を持つトークンをサイトに保存することになるため、管理者アカウントの保護やプラグインの更新状況の確認も合わせて行います。

方法2: テーマのコードでパラメーターを付ける

プラグインを使わず、必要な場所だけに IO を使う方法もあります。WordPress はアップロード時に縮小画像を生成するので、まずは「生成済みの画像を IO で最適な形式に変換する」使い方から始めると、既存の表示を崩さずに導入できます。

add_filter( 'wp_get_attachment_image_src', function ( $image ) {
	if ( is_admin() || empty( $image[0] ) ) {
		return $image;
	}
	$image[0] = add_query_arg( 'format', 'auto', $image[0] );
	return $image;
} );

add_filter( 'wp_calculate_image_srcset', function ( $sources ) {
	if ( is_admin() || ! is_array( $sources ) ) {
		return $sources;
	}
	foreach ( $sources as $width => $source ) {
		$sources[ $width ]['url'] = add_query_arg( 'format', 'auto', $source['url'] );
	}
	return $sources;
} );

format=auto を付けると、IO がブラウザーの対応状況を見て WebP などの形式を選びます。管理画面では元の URL のままにするため、is_admin() で除外しています。本文に直接書かれた <img> タグの src には、このフィルターが効かない場合があります。

設定後の確認方法

画像がIOで処理されているかは、レスポンスヘッダーで確認できます。

curl -sI "https://example.com/wp-content/uploads/2026/10/photo.jpg?width=400&format=auto" \
  -H "Accept: image/avif,image/webp,*/*"

IO で処理されていれば、fastly-io-info というヘッダーが付き、入力と出力のファイルサイズ・寸法・形式が表示されます。ifsz が元画像のサイズ、ofsz が変換後のサイズです。エラーや警告がある場合は、fastly-io-error や fastly-io-warning のヘッダーに内容が出ます。

fastly-io-info が付かないときは、次の順に確認します。

サイトのドメインが Fastly を経由しているか（レスポンスに Fastly のキャッシュ関連のヘッダーがあるか）
サービスで IO が有効になっているか
ヘッダーを付ける条件が画像の URL に一致しているか、シールドの設定と両方で付いているか
そのリクエストがキャッシュ可能か（Cache-Control: private や Cookie によってキャッシュ対象外になっていないか）

ブラウザーで確認する場合は、開発者ツールのネットワークタブで画像のリクエストを選び、同じヘッダーが付いているか、表示上のサイズに対して転送量が小さくなっているかを見ます。

つまずきやすい点

画像を差し替えても古いまま: 同じファイル名で画像を上書きすると、変換済みの画像がキャッシュに残ります。Fastly のパージで該当 URL を削除するか、別のファイル名でアップロードします。
オフロードした画像が変換されない: 画像を外部ストレージに移しているプラグインを使っていると、画像の URL が Fastly を経由しない別ドメインになっていることがあります。その場合は、そのドメインも Fastly のサービスで配信する必要があります。
画像が粗くなった: quality を下げすぎていないか、縮小済みの小さい画像を元にしていないかを確認します。IO は元画像より大きく拡大しても画質は上がりません。

まとめ

Fastly IO は、Fastly 側での有効化、シールドの設定、x-fastly-imageopto-api ヘッダーの付与がそろって初めて動きます。
WordPress 側は、Fastly 公式プラグインの Advanced にある IO 設定を使うか、フィルターで画像 URL に format=auto などを付けます。
公式プラグインは最近の WordPress でのテスト状況に注意が必要なので、ステージング環境で確認してから導入します。
動作確認は fastly-io-info ヘッダーで行い、付かないときは経由・有効化・ヘッダー条件・キャッシュ可否の順に調べます。