ESA 画像変換の設定による高速配信 - Edge Security Acceleration

Edge Security Acceleration (ESA) は画像変換機能を提供します。この機能は、元画像のフォーマットや品質を変換し、クロップやスケーリングを行い、その結果をキャッシュします。これにより、画像の配信速度が向上し、back-to-origin トラフィックが削減されます。

制限事項

画像処理機能を使用する際には、以下の制限が適用されます。

元画像の制限：

サポートされている画像フォーマットは、JPEG、JPG、PNG、WebP、BMP、GIF、TIFF、JPEG 2000 です。
元画像のサイズは 10 MB を超えることはできません。
幅 × 高さの積が 16,777,216 ピクセルを超えてはなりません。

説明
GIF 画像の場合、総幅 × 総高さは、すべてのフレームの合計となります。 ImageMagick などのツールを使用して、GIF 画像のフレーム詳細を表示できます。

変換後の画像の制限：

幅 × 高さの積が 16,777,216 ピクセルを超えてはなりません。
WebP フォーマットに変換する場合、幅 × 高さの積は 16,777,216 ピクセルを超えることはできず、また、幅と高さのどちらも個別に 16,384 ピクセルを超えることはできません。ソース画像がアニメーションの場合、WebP に変換すると静止画になります。

キャッシュプリフェッチの制限：

画像変換機能は、キャッシュプリフェッチされたコンテンツには適用されません。キャッシュプリフェッチ中、ESA ノードは元の画像ファイルのみをオリジンフェッチし、画像変換は実行しません。

画像変換の有効化

ESA コンソールで、[サイト管理] に移動します。 サイト 列で、対象のサイトをクリックします。
左側のナビゲーションウィンドウで、速度とネットワーク > 最適化 を選択します。
[速度の最適化] タブに移動します。[画像変換] トグルをオンにします。次に、異なるイメージ変換を適用するために、リクエスト URL に画像処理パラメーターを追加します。

たとえば、JavaScript では、URL 処理関数を記述して、画像を別のフォーマットに変換できます。
```
function updateImageUrl(format) {
  let baseUrl = "https://example.com/image_01";
  let newUrl = `${baseUrl}.png?image_process=format,${format}`;
  document.getElementById('imageElement').src = newUrl;
}

// BMP フォーマットに変換するための呼び出し例
updateImageUrl("bmp");

// JPG などの別のフォーマットに変換する場合：
// updateImageUrl("jpg");
```
上記のコードでは、image_process=format,${format} が画像変換パラメーターを指定します。サポートされているパラメーターとその有効な値の詳細については、「サポートされている画像処理メソッド」をご参照ください。

変換の検証

元のリクエスト

example.com/bb.jpeg をリクエストします。レスポンスは、通常の向きの .jpeg フォーマットの画像を返します。

変換後のリクエスト

フォーマット変換： .jpeg 画像を .png に変換するには、リクエスト URL を example.com/bb.jpeg?image_process=format,png に変更します。レスポンスは .png 画像を返します。
画像の回転： 画像を時計回りに 90° 回転させるには、リクエスト URL を example.com/bb.jpeg?image_process=rotate,90 に変更します。レスポンスは、時計回りに 90° 回転した画像を返します。

サポートされている画像処理メソッド

ESA は、1 つ以上の変換パラメーターを画像に適用することをサポートしています。サポートされているパラメーターを次の表に示します。

画像処理機能	処理パラメーター	説明
フォーマット変換	format	画像フォーマットを変換します。
品質変換	quality	画質を調整します。
画像のクロップ	crop	指定したサイズに画像をクロップします。
画像のスケーリング	resize	指定したサイズに画像をスケーリングします。現在、縮小のみがサポートされており、拡大は利用できません。
画像の回転	自動回転： auto-orient 指定の回転: 回転	メタデータに基づいて画像を自動的に回転させるか、指定した角度で時計回りに回転させます。
画像の色	明るさ: 明るいコントラスト： contrast シャープ化： sharpen	画像の輝度、コントラスト、鮮明度を調整します。
ウォーターマークの追加	watermark	画像またはテキストのウォーターマークを写真に追加します。
情報の取得	info	ディメンション、フォーマット、品質などの画像情報を取得します。

サイト全体機能とルールベース機能の関係

サイト全体機能で追加された構成は、そのサイトのすべてのリクエストに適用されます。この機能を特定のリクエストに対してのみ有効にしたい場合は、ルールベースの構成を使用します。ユーザーリクエスト内の特定のパラメーターを検出するためのルール条件を定義することで、構成が一致するリクエストにのみ適用されるようにします。サイト全体の画像変換機能に対応するルールベースの機能は、Image Optimization です。