画像の最適化のユースケース

このページでは、高度な画像処理の動作、パイプラインの順序付けの効果、画像の自動正規化ルールの例を示します。

変換の順序

imop クエリ パラメータ文字列のオペレーションは、左から右に順番に実行されます。ただし、metadata または scale が最初に実行され、canvas が最後に実行されます。すべてのオペレーションは前のオペレーションの視覚的な出力に直接作用するため、パラメータの順序は、派生画像の最終的な視覚的な品質と詳細の保持に影響します。

1,000 ピクセル、高さ 1,000 ピクセルのソース画像を考えてみましょう。

例: Resize の後に Crop が続く

https://www.example.com/image.jpg?imop=Resize,height=200;Crop,left=0.5

  1. サイズ変更: まず、height=200 パラメータを満たすように、画像が 1,000 × 1,000 ピクセルから 200 × 200 ピクセルに縮小されます。

  2. 切り抜き: left=0.5 オペレーションは、すでに縮小された画像の左半分を削除します。

結果: コンテンツの右側 50% を表す 100 x 200 ピクセルの最終画像。画像全体が切り抜き前に縮小されるため、最終的な領域のディテールは大幅に失われます。

例 : Crop の後に Resize が続く

https://www.example.com/image.jpg?imop=Crop,left=0.5;Resize,height=200

  1. 切り抜き: left=0.5 オペレーションは、まず高解像度のソース画像の右 50% を抽出し、500 x 1000 px 中間画像を作成します。

  2. サイズ変更: height=200 オペレーションは、切り抜かれたセクションを最終的な高さまで縮小します。

結果: 最終的な画像は 100 * 200 ピクセルになります。元の画像が最初に切り抜かれ、後でサイズ変更されたため、最終的な出力では詳細と鮮明さが大幅に保持されます。

ストレッチとアップスケーリングの動作

デフォルトでは、画像最適化サービスは厳格な縮小専用戦略を適用して、エッジ配信帯域幅を節約し、画質を保護します。元の画像よりも大きいサイズをリクエストすると、Cloud CDN は拡大を無視し、元のサイズの画像を出力します。

この動作をオーバーライドしてアセットを強制的にアップスケールするには、stretch 値を明示的に宣言する必要があります。

アップスケーリングの検証要件

  • デュアル サイズ設定ルール: stretch 値は、Resize オペレーションで width パラメータと height パラメータの両方を明示的に指定した場合にのみ許可されます。

  • 単一ディメンションの制約: widthheight などの単一ディメンションのみを定義するときに scaling=stretch を含めると、画像最適化サービスはリクエスト全体を拒否します。

たとえば

有効なリクエスト: ?imop=resize,width=500,height=500,scaling=stretch

無効なリクエスト: ?imop=resize,width=500, scaling=stretch

キャッシュ保存とキャッシュの無効化

配信元サーバーで元の画像を更新する場合は、キャッシュに保存されたバージョンを無効にして、Cloud CDN が更新されたアセットを取得して配信するようにする必要があります。

キャッシュ動作

画像 URL に追加された変換パラメータの固有の組み合わせごとに、エッジに個別のキャッシュ エントリが作成されます。キャッシュヒット率を最適化するには、パラメータのバリエーションを過剰に作成しないようにします。たとえば、単一ピクセルの変更などです。

Cloud CDN は、クエリ文字列の順序に関係なく、同一の変換パラメータをグループ化するようにキャッシュキーを正規化します。

無効化の動作

配信元サーバーで元の画像を更新する場合は、ベース画像 URL に対して 1 つの無効化リクエストを送信するだけで済みます。強化された Cloud CDN は、キャッシュに保存された元の画像と、その自動生成されたすべてのバリエーション(WebP や最適化されたバージョンなど)をグローバルに自動的に削除します。

バリエーションの無効化の仕組み

ベース画像 URL(/images/my-picture.jpg など)と一致するパスパターンを使用してキャッシュ無効化リクエストを発行すると、Cloud CDN は次のものを自動的に識別して削除します。

  • キャッシュに保存された元のソース画像。

  • 以前に生成されたすべてのバリエーション

Cloud CDN キャッシュの無効化は、次の方法で適用できます。

  • Google Google Cloud コンソール: [ネットワーク サービス] > [Cloud CDN] に移動し、オリジンを選択して [キャッシュの無効化] タブに移動します。または、[ネットワーク サービス] > [ロード バランシング] に移動してロードバランサを選択し、[キャッシュの無効化] タブを使用します。

  • Google Cloud CLI: Google Cloud CLI compute url-maps invalidate-cdn-cache コマンドを使用します。

  • キャッシュタグ : 最適化された画像を管理するには、キャッシュタグを使用することをおすすめします。これにより、特定のタグを対象とする無効化リクエストを発行し、関連付けられたコンテンツを削除して、よりきめ細かい制御を行うことができます。

次に例を示します。

/images/my-picture.jpg とその最適化されたすべてのバリアントをグローバルに無効にするには:

  • パス: 正確なパス /images/my-picture.jpg を指定します。

  • ホスト(省略可): 特定のドメインのイメージのみをクリアする場合は、ホストを指定します。

この単一のアクションを送信すると、画像が最適化されたすべてのバージョンがエッジ キャッシュからグローバルに削除され、ユーザーは次のリクエストで更新されたバージョンをすぐに受け取ることができます。

EXIF のカラー プロファイルと画像の向き(正規化)

最近のスマートフォンやデジタル カメラでは、回転されていないピクセル グリッドを含む RAW 形式で画像を保存し、埋め込まれた EXIF の向きタグを使用して、画像を回転させるよう表示デバイスに指示することがよくあります。たとえば、縦向きの場合は 90 度時計回りに回転します。同様に、埋め込み ICC カラー プロファイルは、さまざまなモニターで色がどのように表示されるかを定義します。

予測可能なオペレーションを確保するため、画像最適化エッジ パイプラインは、変換を実行する前に画像を自動的に正規化します。

正規化プロセス

  • 変換を実行する前に、エッジ エンジンは EXIF の向きタグと ICC カラー プロファイル メタデータを読み取り、それらをピクセル グリッドに物理的に適用します。これにより、後続の crop パラメータと resize パラメータの座標の予測可能性が確保されます。

  • cropresizescale などのオペレーションが実際の視覚的ディメンションに対して正しく実行され、視覚的なエラーを防ぎます。

  • コアピクセルに調整を適用した後、エッジエンジンはファイルから不要なメタデータをすべて削除し、サイズ削減を最大化します。デフォルトでは、メタデータ オペレーションで特定の値がリクエストされない限り、copyright が保持されます。

次のステップ