2026年8月18日

WordPressでimgix・TwicPicsと連携してリアルタイム画像変換を実装する方法

メディア・画像

imgixやTwicPicsのような画像変換CDNをWordPressにつなぐと、画像URLにパラメーターを付けるだけで、リサイズ・トリミング・WebP/AVIFへの変換がリクエスト時に行われます。WordPress側の作業は「画像の置き場所をサービスに登録する」「出力されるURLを変換CDNのドメインに書き換える」の2点です。この記事では、その仕組みと、フィルターでURLを書き換える実装、署名付きURLによる不正利用対策、確認方法までを説明します。

なお、題名の「TWICM」は画像CDNの「TwicPics」を指すものとして扱います。

画像変換CDNの仕組み

通常のWordPressは、画像をアップロードした時点でサムネイルや中サイズなど複数のサイズをサーバー上に作り、srcset でブラウザに選ばせます。画像変換CDNを使う場合は考え方が変わります。

元画像はWordPressの wp-content/uploads（またはS3などのストレージ）に置いたままにする
サービス側に「元画像の取得先（オリジン）」を登録する
ページには https://example.imgix.net/2026/10/photo.jpg?w=800&auto=format のようなURLを出力する
初回のリクエストでサービスがオリジンから元画像を取得し、指定どおりに変換してCDNにキャッシュする。2回目以降はキャッシュから返る

「リアルタイム変換」といっても毎回変換しているわけではなく、初回に変換した結果をエッジでキャッシュする仕組みです。そのため、元画像を同じファイル名で差し替えた場合はキャッシュの削除（パージ）が必要になります。

imgixとTwicPicsの違い（概要）

どちらもURLで変換を指定する点は同じですが、指定の書き方と得意分野が異なります。

imgix：URLのクエリパラメーターで指定します。代表的なものに幅の w、高さの h、切り抜き方の fit=crop、自動形式選択と圧縮の auto=format,compress、画質の q などがあります。オリジンとして「Web Folder」（既存のWebサーバーのURL）やS3などのストレージを登録します。
TwicPics：?twic=v1/resize=800 のように twic=v1/ に続けて変換を書く形式です。JavaScriptライブラリやフレームワーク用コンポーネントを使って、表示領域に合わせて自動でサイズを決める使い方が中心です。WordPress用のプラグインも提供されています。

パラメーター名や対応形式、管理画面の項目名は更新されることがあります（2026年10月現在）。実装前に各サービスの公式ドキュメントで最新の仕様を確認してください。料金体系も変わるため、配信量・変換回数・保存容量のどれが課金対象になるかを契約前に確かめておきます。

準備：オリジンの登録と作業の前提

本番に入れる前に、ステージング環境で試します。以下はimgixのWeb Folder型を例にしますが、TwicPicsでも「パスとオリジンの対応付け」を管理画面で設定する流れは同様です。

サービスの管理画面で新しいソースを作り、オリジンにサイトのURL（例: https://example.com/wp-content/uploads/）を指定する
割り当てられたドメイン（例: example.imgix.net）で、既存画像が表示できるか確認する。https://example.imgix.net/2026/10/photo.jpg のように、uploads以下のパスをそのまま付けて開きます
署名付きURLを使う場合は、署名用のトークンを控える

トークンはテーマやプラグインのコードに直書きせず、wp-config.php に定数として置きます。gitなどで管理しているファイルに含めないよう注意してください。

// wp-config.php（値はダミーです）
define( 'MY_IMGIX_DOMAIN', 'example.imgix.net' );
define( 'MY_IMGIX_TOKEN', 'your-sign-token' );

URLを書き換える実装

WordPressの画像URLは、いくつかの経路で出力されます。主要な経路をフィルターで押さえます。コードは独自プラグインまたはmu-pluginに書きます。

<?php
/**
 * Plugin Name: My imgix URL
 */
defined( 'ABSPATH' ) || exit;

function myimgix_url( $url, $params = array() ) {
	if ( ! defined( 'MY_IMGIX_DOMAIN' ) ) {
		return $url;
	}
	$base = trailingslashit( wp_get_upload_dir()['baseurl'] );
	if ( 0 !== strpos( $url, $base ) ) {
		return $url; // uploads以外（外部画像など）は触らない
	}
	$path   = '/' . substr( strtok( $url, '?' ), strlen( $base ) );
	$params = array_merge( array( 'auto' => 'format,compress' ), $params );
	ksort( $params );
	$query = http_build_query( $params, '', '&', PHP_QUERY_RFC3986 );

	if ( defined( 'MY_IMGIX_TOKEN' ) && MY_IMGIX_TOKEN ) {
		$query .= '&s=' . md5( MY_IMGIX_TOKEN . $path . '?' . $query );
	}
	return 'https://' . MY_IMGIX_DOMAIN . $path . '?' . $query;
}

// 1. 単体の画像URL（アイキャッチの src など）
add_filter( 'wp_get_attachment_image_src', function ( $image ) {
	if ( is_array( $image ) && ! empty( $image[0] ) && ! is_admin() ) {
		$image[0] = myimgix_url( $image[0], array( 'w' => (int) $image[1] ) );
	}
	return $image;
} );

// 2. srcset の各候補
add_filter( 'wp_calculate_image_srcset', function ( $sources ) {
	if ( is_admin() ) {
		return $sources;
	}
	foreach ( $sources as $width => $source ) {
		if ( 'w' === $source['descriptor'] ) {
			$sources[ $width ]['url'] = myimgix_url( $source['url'], array( 'w' => (int) $source['value'] ) );
		}
	}
	return $sources;
} );

wp_get_attachment_image_src はアイキャッチや wp_get_attachment_image() 経由の画像に、wp_calculate_image_srcset は srcset の各候補に効きます。srcset の候補はWordPressが作った中間サイズのURLですが、変換CDNはパスの元画像を基準に処理するため、ここでは中間サイズのファイル名を元画像のファイル名に戻す処理を入れると、より効率よく使えます。最初は上のように「中間サイズをCDN経由で配信する」形で始めても動作します。

本文中の画像（ブロックエディターで挿入した画像）は保存済みHTMLとして出力されるため、wp_content_img_tag フィルター（WordPress 6.0以降）でタグ単位に src と srcset を書き換えるか、出力バッファで置換します。

管理画面では書き換えないようにしています。メディアライブラリの編集画面で元画像を確認したいことが多いためです。

署名付きURLを使う理由

変換パラメーターはURLに書かれているため、第三者が w=8000 のような極端な値でアクセスすると、そのたびに新しい変換が発生します。変換回数や配信量で課金されるプランでは費用が増えるおそれがあります。署名付きURLを有効にすると、正しい署名の付いたURL以外は拒否されるため、サイトが出力したURLだけが使われます。imgixの署名は上のコードのように「トークン＋パス＋クエリ」のハッシュで作りますが、仕様の詳細は公式ドキュメントで確認し、公式のPHPライブラリ（imgix/imgix-php）の UrlBuilder を使う方法も検討してください。

つまずきやすい点

画像が表示されない：まず生成されたURLを直接ブラウザで開きます。404ならオリジンのパス設定、403なら署名の不一致や許可設定を疑います。署名はクエリの並び順が変わると一致しないため、生成側で並びを固定します。
古い画像が出続ける：同じファイル名で差し替えた場合、CDNのキャッシュが残っています。サービスの管理画面やAPIでパージするか、ファイル名を変えてアップロードし直します。
中間サイズが不要になる？：変換CDNだけで配信するなら、WordPressのサムネイル生成を intermediate_image_sizes_advanced フィルターで減らしてディスクを節約することもできます。ただしCDNを外したときに適切なサイズが無くなるため、最初は減らさずに運用し、効果を見てから判断するのが安全です。
キャッシュ系プラグインとの重複：画像最適化プラグインやCDN書き換え機能のあるキャッシュプラグインを併用すると、URLが二重に書き換わることがあります。どちらか一方に任せます。

確認方法

ブラウザの開発者ツールのネットワークタブで、画像のリクエストを確認します。

画像のドメインが変換CDNのものになっているか
レスポンスの Content-Type が、対応ブラウザでは image/webp や image/avif になっているか（auto=format の効果）
表示幅に対して過大なサイズの画像が読み込まれていないか
2回目のアクセスで、キャッシュから返っていることを示すレスポンスヘッダーが付いているか（ヘッダー名はサービスにより異なります）

PageSpeed Insightsで「適切なサイズの画像」「次世代フォーマット」に関する指摘が減っているかも確認材料になります。ただし表示速度は画像以外の要因にも左右されるため、変換CDNの導入だけで評価を判断しないようにします。

まとめ

画像変換CDNは、元画像をオリジンに置いたまま、URLのパラメーターで変換を指定し、初回に変換した結果をCDNにキャッシュする仕組みです。
WordPress側は、wp_get_attachment_image_src・wp_calculate_image_srcset・wp_content_img_tag でuploads配下のURLを変換CDNのドメインに書き換えます。
署名付きURLを使い、トークンは wp-config.php の定数で管理して、極端なパラメーターによる不正利用を防ぎます。
仕様・管理画面・料金はサービスごとに変わるため、公式ドキュメントで最新の情報を確認し、ステージングで表示とキャッシュの挙動を確かめてから本番に反映してください。