Cloudflare Images が画像の置き場所だとすれば、Cloudflare Image Transformationsはそれを高速にするエンジンです。画像が要求された瞬間に、すでに手元にあるオリジナルだけを使って、リサイズし、圧縮し、最新フォーマットへ変換します。ビルド手順も、事前生成のサムネイルも、ストレージを散らかす別個のコピーもありません。欲しいサイズとフォーマットをURLで指定すると、Cloudflareがそれをエッジで生成してキャッシュします。

このガイドは、Cloudflareでの画像ホスティングに関する私の概説の実践的な手引きです。変換を実行する2つの方法、重要なパラメータ、2026年の費用、そしてWordPressとPrestaShopでそのすべてを自動化する方法を説明します。

要点

  • 変換は、1つのオリジナルからオンデマンドで画像をリサイズ・圧縮し、WebP/AVIFへ変換します
  • 2つの方法：シンプルなURL形式（/cdn-cgi/image/...）と、完全に制御するためのCloudflare Worker
  • format=autoは、ブラウザが対応するものに応じてAVIFまたはWebPを自動で配信します
  • 料金は寛大です。1か月あたり最初の5,000回のユニーク変換は無料、以降は1,000回ごとに0.50ドルです
  • 変換にはもはやProプランが不要で、これまでの年とは大きく異なる変更です
  • オリジンまたはCloudflare R2 から画像を変換でき、私の無料プラグインとWorkerでそのすべてを自動化できます

Cloudflare Image Transformationsの仕組み

従来、レスポンシブ画像を配信するには、あらゆるサイズを事前に生成する必要がありました。写真をアップロードすると、CMSがサムネイル、中サイズ版、大サイズ版などを作成し、それぞれを別個のファイルとして保存します。これはストレージを浪費し、アップロードを遅くし、それでも特定のデバイスが必要とする正確なサイズには決して一致しません。

画像変換はこれを逆転させます。オリジナルを1つ保存します。訪問者のブラウザが特定のサイズを要求すると、Cloudflareがそのサイズをその場で生成し、最適化し、結果をエッジにキャッシュします。同じ版を必要とする次の訪問者は、キャッシュされたコピーを即座に受け取ります。派生版を自分で生成したり保存したりすることは決してないのに、すべてのデバイスがその画面とフォーマット対応に合わせた画像を受け取ります。

訪問者にとっての結果：1MBの写真が100～200KBのAVIFとして届き、ビューポートにぴったり合わせられ、近くのエッジロケーションから配信されます。

方法1：URL形式による画像変換

画像を変換する最も簡単な方法は、そのURLを自分のゾーン上の特別なパスでラップすることです。

1https://example.com/cdn-cgi/image/<options>/<source-image-url>

幅を800pxにリサイズし、品質を75に設定し、最適なフォーマットを自動選択する実例です。

1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg

これを使うには、CloudflareダッシュボードでゾーンのTransformationsを有効にします（Imagesの下）。有効にすると、そのゾーン上のどの画像も、URLを組み立てるだけで変換できます。最も手早く始められ、コードは不要です。

最も有用なオプションは次のとおりです。

オプション機能
width、height目標寸法（ピクセル）
fitボックスへの収め方：scale-down、contain、cover、crop、pad
quality圧縮レベル、1～100（75が妥当な既定値）
format=auto対応していればAVIF/WebP、なければ元のフォーマットを配信
gravity切り抜き時の焦点（例：auto、face、または座標）
dprRetinaディスプレイ向けのデバイスピクセル比
sharpen、blur任意の後処理エフェクト

方法2：Cloudflare Workerによる画像変換

本格的に制御するには、Cloudflare Worker 内でfetchリクエストのcf.imageプロパティを使って変換します。これによりロジックを適用できます。デバイスに応じて寸法を選ぶ、変換できる画像を制限する、あるいはページ全体の画像リンクを書き換える、といったことです。

 1export default {
 2  async fetch(request) {
 3    const options = {
 4      cf: {
 5        image: {
 6          width: 800,
 7          quality: 75,
 8          format: "auto",
 9          fit: "scale-down",
10        },
11      },
12    };
13
14    // The image you want to transform
15    const imageURL = "https://example.com/uploads/photo.jpg";
16    return fetch(imageURL, options);
17  },
18};

Worker方式は私自身のツールを動かしているものです。サイトの最終的なHTML出力を書き換えられるからで、テーマやプラグイン、さらにはインラインCSSが挿入する画像も含まれます。これはURLだけの方式では単独では到達できません。Workersをより幅広く学びたいなら、公式Workersドキュメント が優れた出発点です。

R2やリモートソースからの画像変換

同じゾーン上の画像に限られるわけではありません。変換はリモートオリジンから取得できるため、Cloudflare R2 オブジェクトストレージの完璧なパートナーになります。オリジナルをR2バケットに保管し、配信時に変換すれば、R2はエグレス料金を課さないのでエグレスには何も支払いません。この具体的なパターンは、Cloudflare R2での画像ホスティング のガイドで詳しく扱っています。

自分のゾーンにない画像を変換する場合は、変換設定でソースドメインを許可することを忘れないでください。さもないとCloudflareは取得を拒否します。

Cloudflare Image Transformationsの料金

ここでの経済性は、とりわけ中小規模のサイトにとって親切です。2026年の公式Images料金 に基づくと：

区分料金
最初の5,000回のユニーク変換 / 月無料
5,000回を超える分1,000回ごとに0.50ドル（ユニーク変換）
エグレス帯域幅0ドル（無料）

「ユニーク変換」とは、1か月のうちに1つのオリジナル画像へ適用される、オプションの1つの固有の組み合わせのことです。ある写真の同じwidth=800,format=auto版を千回要求しても、なお1回のユニーク変換として数えられます。残りの999回はキャッシュから配信されるからです。だからこそ、忙しいサイトでも実際の変換回数は低く保たれます。ページビュー数よりも、固有の画像とサイズの組み合わせの数のほうがはるかに少ないのです。

繰り返すに値する大きな変更点：変換はかつて有料のProプランの背後にありました。今では無料プランで、その5,000回の月間枠まで利用できます。小さなブログやポートフォリオにとって、その場での画像最適化は今や事実上無料です。

WordPressとPrestaShopでの自動化

変換URLを手作業で組み立てるのは数枚なら問題ありませんが、実際のサイトには数百枚あり、しかも動的に生成されます。それが難しい部分であり、まさに私の無料ツールが解決するものです。

完全なコピー&ペーストの手順については、WordPress向けCloudflare Image Resizing とPrestaShop向けCloudflare Image Resizing をお読みください。プラグインとWorkerを合わせれば、テンプレートに一切手を触れることなく、サイト上のすべての画像が最適化されます。

画像ライブラリをCloudflare Images製品で直接保存・管理したい場合は、Easy Cloudflare Images が、Windows・macOS・Linux全体で画像をアップロードして最適化するための私の無料デスクトップアプリです。

簡単な前後テスト

どんな最適化でも、それを判断する誠実な方法は計測することです。

  1. 画像の多いページを選び、PageSpeed Insights にかけます。Largest Contentful Paintと画像の総重量を記録します。
  2. 変換を有効にし、そのページの画像にwidthとformat=autoを適用します（URL方式、Worker、または私のプラグインで）。
  3. テストを再実行します。画像のペイロードが急減し、LCPが改善し、不合格のスコアが緑に転じることがよくあります。

その計測可能な改善こそ、ユーザー体験と検索順位の両方を動かす傾向があるものです。

重要なポイント

  • Cloudflare Image Transformationsは、1つのオリジナルから、最適化され正しいサイズの画像をオンデマンドで生成します
  • URL方式（/cdn-cgi/image/...）が最も手早い出発点で、Workerは完全なプログラム制御を与えます
  • format=autoはAVIF/WebPのネゴシエーションを代わりに処理し、古いブラウザには安全なフォールバックがあります
  • 最初の5,000回のユニーク変換は無料、以降は1,000回ごとに0.50ドル、エグレス料金はありません
  • 変換は今やProのサブスクリプションなしで無料プランでも動作します
  • 変換をR2と組み合わせてエグレス無料のメディアライブラリを作り、私のプラグインとWorkerですべてを自動化しましょう

よくある質問

Cloudflare ImagesとImage Transformationsの違いは何ですか? Cloudflare Imagesは、画像を保存・最適化・配信するより広い製品です。Image Transformationsはその中のリサイズ・最適化機能です。Cloudflare Images、R2、または自分のオリジンに保存された画像に対して、必ずしもImages製品に保存することなく変換を使えます。

画像変換を使うのに有料プランは必要ですか? いいえ、もう必要ありません。変換は無料プランで1か月あたり5,000回のユニーク変換まで利用できます。それを超えると1,000回あたり0.50ドルを支払い、エグレス料金はありません。

format=autoは何をしますか? Cloudflareにブラウザのacceptヘッダーを調べさせ、対応する最も効率的なフォーマット、通常はAVIFまたはWebPを配信し、最新フォーマットに対応しないブラウザには元のフォーマット（JPEGやPNGなど）にフォールバックさせます。

Cloudflareにホストされていない画像を変換できますか? はい。変換設定でそのソースを許可していれば、変換はCloudflare R2バケットや外部サーバーを含むリモートオリジンから取得できます。

課金上、何がユニーク変換として数えられますか? 請求月内に1つのオリジナル画像へ適用される、オプションの1つの固有の組み合わせです。同じ変換版への繰り返しのリクエストはキャッシュから配信され、1回だけ数えられるため、実際のコストは低く保たれます。

これをWordPressやPrestaShopのサイト全体に適用するには? 手早い自動設定には私の無料WordPressプラグインを使うか、CSS内のものを含むすべての画像リンクを書き換える完全な網羅には私のCloudflare Workerをデプロイしてください。どちらも私のステップバイステップのプラットフォームガイドに記載されています。