スタート ガイド

このページでは、Cloud CDN の画像最適化の概要について説明します。画像最適化を構成する方法と、サポートされているオペレーションのリストを例とともに示します。

プレビュー

このプロダクトまたは機能は サービス固有規約の「一般サービス規約」セクションの「一般提供前のサービス規約」の対象となります 。 pre-GA のプロダクトと機能は「現状のまま」利用できますが、サポートが制限されることがあります。 詳細については、 リリース ステージの説明をご覧ください。

前提条件

Cloud CDN の画像最適化が機能するには、次の前提条件を満たしている必要があります。

• Cloud CDN キャッシュ ポリシーが URL ルートまたは関連するバックエンド サービスやバケットで有効になっており、その URL マップルートで画像最適化機能が有効になっている必要があります。

• 画像最適化は、グローバル外部アプリケーション ロードバランサでのみサポートされています。従来のアプリケーション ロードバランサはサポートされていません。

• クライアント リクエストには、image/webp、image/avif、image/*、*/* などの画像コンテンツを受信できることを示す Accept ヘッダーを含める必要があります。

• 配信元サーバーは、HTTP 200 ステータス コードと、サポートされている画像 Content-Type ヘッダーで応答する必要があります。

• URL には imop クエリ パラメータを含める必要があり、1 つ以上の有効な変換オペレーションを含める必要があります。

画像最適化を構成する

画像最適化には、アクティブなキャッシュを有効にする必要があります。次のいずれか 1 つ以上を構成してください。

• バックエンド ベースのキャッシュ: バックエンドで [Cloud CDN を有効にする] がオンになっていることを確認します。

• URL マップレベルのキャッシュ: 画像最適化を有効にするパスの URL マップレベル でキャッシュ ポリシーが構成されていることを確認します。

gcloud

画像最適化ポリシーは routeAction オブジェクト内で定義されるため、YAML ファイルに構成を追加して、URL マップにインポートする必要があります。

既存の URL マップ構成をローカルの YAML ファイルにエクスポートします。

gcloud beta compute url-maps export YOUR_URL_MAP_NAME \
    --global \
    --destination my-url-map.yaml

テキスト エディタで my-url-map.yaml ファイルを編集し、選択した routeAction または defaultRouteAction セクションに imageOptimizationPolicy フィールドを追加します。

name: image-matcher
routeRules:
  - description: ImageOptimizationService
    matchRules:
      - prefixMatch: /images/
    priority: 1
    routeAction:
      imageOptimizationPolicy:
        queryParameterInterpretation: ENABLED

更新された URL マップをインポートする

gcloud beta compute url-maps import YOUR_URL_MAP_NAME \
    --global \
    --source my-url-map.yaml

コンソール

1. Google Cloud コンソールで、[ロード バランシング] ページに移動します。

   [ロード バランシング] ページに移動

2. グローバル外部アプリケーション ロードバランサの名前をクリックします。
3. [Edit] をクリックします。
4. [バックエンドの構成] タブに移動します。
5. キャッシュを構成する: 画像最適化を正常に保存するには、アクティブなキャッシュが必要です。画像最適化が機能するように、次のいずれかを選択して構成します。
   • バックエンド ベース: [バックエンド サービス] の構成で [Cloud CDN を有効にする] が選択されていることを確認します。
   • URL マップレベル:
     1. [ルーティング ルール] に移動し、[詳細なホストとパスのルール] を選択します。
     2. 画像最適化を有効にするルートの URL マップレベルでキャッシュ ポリシーを定義します。

ルーティング アーキテクチャに応じて、次のいずれかのルーティング ルールを選択します。

デフォルトのルーティング ルールを使用するには、次の操作を行います。

1. [**ホストとパスのルール**] セクションの [**アクション**] で、 [**トラフィックを 1 つのバックエンド モードにルーティング**] を選択し、バックエンドを リストから選択します。
2. [画像最適化] セクションを開きます（デフォルトでは折りたたまれています）。
3. [画像最適化を有効にする] チェックボックスをオンにします。

カスタム ルーティング ルールを使用するには、次の操作を行います。

1. [ホストとパスのルール] セクションで、[ホストとパスのルールを追加] を選択します。
2. In the [**ホスト**] フィールドに「*」と入力して、すべてのホスト名が一致するようにします。
3. [パスマッチャー] セクションで、YAML エディタを使用して構成を定義します。
4. コードのガイダンスについては、YAML エディタの下にある [コード ガイダンス] をクリックしてください。
5. スニペットをコピーして、YAML エディタに貼り付けます。
6. プレースホルダの値を更新します。

構成を確認する

1. 構成を確認します。
2. [完了] をクリックしてサブエディタを閉じます。
3. [更新] をクリックして構成を保存します。

サポートされている画像形式

Cloud CDN の画像最適化は、配信元サーバーからの幅広い入力形式をサポートしています。ほとんどの形式は処理と出力に使用できますが、一部の形式は入力のみで、ターゲット出力形式として使用できません。

送信元サーバーからサポートされている画像形式は次のとおりです。

形式	Content-Type ヘッダー	入出力	ユースケースのシナリオ
gif	image/gif	入力と出力	標準のアニメーション/静止画形式。アニメーション フレームは、Freeze オペレーションを使用して抽出できます。
png	image/png	入力と出力	ロスレス形式。透明度、ロゴ、デジタル アートに最適です。
webp	image/webp	入力と出力	不可逆圧縮と可逆圧縮の両方を備えた、最新のウェブ最適化形式。
jpeg	image/jpeg	入力と出力	標準の写真形式。
brunsli	image/x-j	入力と出力	高効率のロスレス JPEG 再パッキング形式。
tiff	image/tiff	入力と出力	高品質のタグベースのラスター形式。
avif	image/avif	入力と出力	高効率の次世代画像形式。
bmp	image/bmp	入力のみ	出力形式として指定できません。WEBP または JPEG に ?imop=Convert,format=webp を使用して変換します。
ico	text/ico、image/ico、image/icon、 、application/ico、image/x-icon、image/vnd.microsoft.icon	入力のみ	アイコン コンテナ形式。エクスポートできません。配信用にサポートされている 出力形式に変換してください。
jp2k	image/jp2	入力のみ	JPEG 2000 形式。a Convert オペレーションを使用して明示的に変換する必要があります。
heif	image/heif	入力のみ	High Efficiency Image Format。エッジ配信の前に変換する必要があります。

注: リクエストされた出力形式がネイティブでサポートされていない場合、 またはソース形式が入力のみの場合、サポートされている出力形式を指定するには、Convert クエリ パラメータでimop オペレーションを明示的に 定義する必要があります。例: ?imop=Convert,format=webp.

画像変換 URL

動的画像の変換を行うには、画像 URL に imop クエリ パラメータを追加します。このパラメータには、順番に適用される 1 つ以上のオペレーションで構成される変換文字列が保持されます。

変換文字列には、次の形式ルールが使用されます。

• 個々のオペレーションはセミコロン（;）で区切ります。
• 個々のオペレーション内の内部パラメータはカンマ（,）で区切ります。
• 1 つのクエリ文字列に含めることができるのは、特定のタイプのオペレーション 1 つのみです。

ベースライン構文は次の構造を使用します。

?imop=[OPERATION_1];[OPERATION_2];...[OPERATION_N]

画像に対して複数のアクションを同時に実行するには、連結されたパラメータ文字列を画像 URL に追加します。たとえば、画像のサイズを幅 800 ピクセル に変更し、圧縮品質を 85 に設定して、形式を WebP に変換するには、パラメータ文字列を追加します。

次に例を示します。

https://www.example.com/image.jpg?imop=Resize,width=800;Compress,quality=85;Convert,format=webp;

ポリシーの構造

画像最適化ポリシーは、画像最適化機能の機能に関連するすべてのプロパティを含むコア構成ラッパーとして機能します。

名前	説明	構成
queryParameterInterpretation	画像最適化のクエリ パラメータをデータプレーンで解釈するかどうかを決定する列挙型値。	必須 。DISABLED に設定すると、変換のクエリ パラメータはポリシーによって無視され、この機能は無効になります。ENABLED に設定すると、この機能が有効になります。

ポリシーの依存関係と検証

画像最適化ポリシーは、Cloud CDN キャッシュに依存しています。 この機能を使用するには、次のいずれかの場所にキャッシュ ポリシー を明示的に設定する必要があります。

• 画像最適化ポリシーが構成されているのと同じ URL マップルート。

• そのルートに関連するバックエンド サービスまたはバックエンド バケット。

画像最適化ポリシーは、有効な基盤となるキャッシュ ポリシーと組み合わせて厳密に適用されます。

**注:** 同じルートまたは関連するバックエンド サービスやバケットでキャッシュ ポリシーが有効になっていない場合、画像最適化ポリシーを構成すると、 構成検証エラーが自動的に返されます。

画像最適化の順序付けルール

imop クエリ パラメータにリストされているオペレーションは、次の絶対システム オーバーライドを除き、左から右に処理されます。

• metadata オペレーションと scale オペレーションは常に最初に実行されます。
• canvas オペレーションは常に最後に実行されます。

すべての入力アセットは、これらの変換が実行される前に自動的に正規化されます。EXIF の向きマーカーと ICC カラープロファイルは、メタデータが削除される前に画像ピクセルに直接適用されるため、後続の構造アクションで座標の整合性が正確に維持されます。

**注:** リクエストごとに許可されるオペレーションは、特定のタイプにつき 1 つのみです。

次のステップ

• サポートされている形式
• 制限事項
• 画像最適化のユースケース
• 画像変換リクエストの保護
• トラブルシューティングとベスト プラクティス