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

このページでは、高度な画像処理の動作、パイプラインの順序による影響、画像の自動正規化ルールについて説明します。

変換の順序

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

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

例: Resize の後に Crop

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

  1. サイズ変更: 元の 1000×1000 ピクセルの画像が200×200 ピクセルにサイズ変更されます (アスペクト比 1:1 は維持されます)。

  2. 切り抜き: left=0.5 オペレーションにより、 すでにサイズ変更された画像の左半分が切り抜かれます。

結果: コンテンツの右 50% を表す 100 x 200 ピクセル の画像。

例 : Crop の後に Resize

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

  1. 切り抜き: left=0.5オペレーションは、まず 高解像度のソース画像の右 50% を抽出し、500 x 1000 px 中間画像を作成します(アスペクト比が 1:2 に変更されます)。

  2. サイズ変更: width=200 パラメータは、この中間画像のサイズを変更します。 新しいアスペクト比 1:2 を維持するため、高さは 400 ピクセル にスケーリングされます。

結果: 200 * 400 ピクセル の最終画像。

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

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

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

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

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

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

次に例を示します。

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

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

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

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

キャッシュの動作

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

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 を指定します。

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

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

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

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

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

正規化プロセス

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

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

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

次のステップ