Cloudflare画像最適化機能の使い分け:Polish、WebP配信、Image Transformationsの違いと確認手順

Webサイトの表示速度高速化において、画像の軽量化は最も即効性のある施策です。

Cloudflareのダッシュボード「速度(Speed)」>「最適化(Optimization)」>「画像最適化(Image Optimization)」セクションには、画像を最適化するための強力な機能が用意されています。

「Polish」「WebP」「Image Transformations」など、似たような言葉が並んでおり、それぞれの違いやどれを有効にすべきか迷う方も少なくありません。

本記事では、これら3つの機能の本質的な違い、設定方法、そして実際に機能が動作しているかを見分ける確認手順を分かりやすく解説します。

目次

1. 3つの機能の特徴と違い

まずは、それぞれの機能が「何をするものなのか」を整理しましょう。一言でいうと、PolishとWebPは「全自動の基本セット」、Image Transformationsは「ルールで細かく制御できる応用ツール」です。

機能名主な役割特徴
Polish (ポリッシュ)画像の全体的な自動圧縮(軽量化)オリジン画像そのものを軽量化するベース機能。ロスレス/ロス有が選べる。
WebP配信次世代フォーマットへの自動変換Polishのオプション機能。ブラウザに合わせて自動でWebPに切り替える。
Image Transformations(※)ルールに基づく動的な画像変換・リサイズURLや画像最適化ルールを使って、特定画像のリサイズやWebP/AVIF化を細かく制御する。

(※) Cloudflare Imagesの契約が必要です。

Polish(画像最適化)

オリジンサーバーから取得した画像(JPEG、PNGなど)のファイルサイズを、Cloudflareのエッジサーバーが自動で圧縮・軽量化してキャッシュする機能です。

  • ロスレス(Lossless): 画質を一切落とさず、不要なメタデータ(位置情報やカメラの機種データなど)のみを削除します。
  • ロス有(Lossy): 人の目では気づかないレベルで画質をわずかに落とし、ファイルサイズを劇的に削減します(推奨)。

WebPの配信(WebP Delivering)

Polishの拡張オプションです。これを有効にすると、CloudflareはユーザーのブラウザがWebPに対応しているかを自動判別し、元のJPG/PNG画像を自動的にWebPフォーマットへ変換して配信します。古いブラウザには元のJPG/PNGのまま安全に配信されます。

Image Transformations(画像変換)

Polishのようにサイト全体を一括で自動圧縮するのではなく、「特定の画像だけをリサイズしたい」「特定の拡張子だけをルールに基づいてWebP/AVIFに動く変換したい」という場合に、より細かく制御・加工できる高度な機能です。URLパラメータ(/cdn-cgi/image/)を用いたり、Cloudflareの「画像最適化ルール」と組み合わせて使用します。

2. 各機能の設定手順

すべてダッシュボードの同じエリアから設定・確認が可能です。

  1. Cloudflareにログインし、対象ドメインを選択します。
  2. 左メニューから「速度(Speed)」>「最適化(Optimization)」に進み、上部タブから「画像最適化(Image Optimization)」を選択します。

Polish & WebP自動変換の有効化

  1. Polish」セクションで、ドロップダウンから「ロス有(Lossy)」(またはロスレス)を選択します。
  2. そのすぐ下(または横)にある「WebPの配信(WebP Delivering)」のトグルスイッチをオンにします。

これでサイト全体の自動WebP化のベースが完了します。

Image Transformationsの有効化

  1. 同ページ内の「Image Transformations」セクション、または左メニューの「画像(Images)」>「変換(Transformations)」から機能を有効化します。
  2. 特定の画像のみリサイズして配信したい場合や、URLを変更せずに特定のパスだけ自動フォーマット(Auto Format)を適用したい場合に、ルールを作成して運用します。

3. 各機能の配信状況を確認する手順

設定が反映されているかは、ブラウザのデベロッパーツール(F12キー)の「Network」タブ、または curl コマンドで確認するHTTPレスポンスヘッダーで見分けることができます。

確認の際は、キャッシュを無視するために必ず Ctrl + F5(Macは Cmd + Shift + R)で強力再読み込みを行ってください。

見分けるポイント:レスポンスヘッダーの比較

確認したい機能注目するヘッダー項目と期待される値状態の意味
WebP自動変換Content-Type: image/webp元のURLが .jpg や .png でも、ここが image/webp になっていればWebP配信が成功しています。
PolishCf-Polished: status=converted または origSize=xxxxCloudflareのPolish機能によって、画像の圧縮・最適化処理が行われた証拠です。
Image TransformationsCf-Resized: internal=200(値は環境による)Image Transformations(動的リサイズやルールによる変換)が適用された画像に出力されます。

共通の重要ヘッダー:Cf-Cache-Status

どの機能を使う場合も、Cf-Cache-Status: HIT になっていることを確認してください。
初回アクセス時は MISSになりますが、2〜3回リロードして HIT になれば、変換済みの軽量画像がキャッシュから超高速配信されている状態です。

具体的なチェック手順(Chromeデベロッパーツールの例)

  1. F12キーでデベロッパーツールを開き、「Network」タブ > フィルター「Img」を選択。
  2. ページをリロードし、対象の画像をクリックして右側に表示される「Headers」タブを開きます。
  3. Response Headers(レスポンスヘッダー)」の一覧から、上記の Content-Type、Cf-Polished、Cf-Cache-Status 、Cf-Rayが出ているかを確認します。

まとめ:どれを使うべき?

  • 「Polish」+「WebPの配信」をオン

まずは手軽な 「Polish」+「WebPの配信」 をオンにするのが一番の近道です。これだけでソースコードを一切変えずにサイト全体が自動的にWebP化され、高速化します。

  • 画像のサイズ自体も最適化したい・特定ルールで制御したい場合

「Image Transformations」 を有効化し、画像最適化ルールや専用URLパラメータを併用してください。

Web表示スピード改善・セキュリティ対策のCloudflare

導入のご相談だけでなく、運用フェーズでのサポートも承ります。
DDoS攻撃や悪質なBot(ボット)からのアクセスを防ぎたい方、WAF機能やプランの詳細を知りたい方、
国内エンジニアによる安心の運用サポートをご希望の方も、ぜひお気軽にお問い合わせください。

目次