画像変換の有効化

Edge Security Acceleration (ESA) はエッジでオリジン画像を変換 (フォーマット変換、品質の調整、クロップ、スケーリング) し、結果をキャッシュすることで、配信速度を向上させ、オリジンへのトラフィックを削減します。

使用制限

画像処理には、以下の使用制限があります。

オリジン画像の制限：

サポートされている画像フォーマットは、JPEG、JPG、PNG、WebP、BMP、GIF、TIFF、JPEG 2000、AVIF です。
オリジン画像のサイズは 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} が画像変換パラメーターを指定します。サポートされているパラメーターとその有効な値の詳細については、「サポートされている画像処理方法」をご参照ください。

アダプティブ WebP とアダプティブ AVIF

アダプティブ WebP または アダプティブ AVIF を有効にすると、ESA ノードがブラウザーの互換性を検出し、クライアントに返す前にオリジン画像を WebP または AVIF 形式に変換することで、転送サイズを削減します。どちらかの設定を個別に有効にできます。

アダプティブ WebP またはアダプティブ AVIF の有効化

画像変換 カードで、[設定] をクリックして、設定フォームを展開します。
ステータス トグルがオフになっている場合は、オンにします。
アダプティブ WebP または アダプティブ AVIF のトグルをオンにします。両方のトグルを同時にオンにすることができます。
設定を保存するには、OK をクリックします。

アダプティブ変換は、次のすべての条件が満たされた場合にのみ適用されます：

リクエストの Accept ヘッダーに image/avif または image/webp が含まれていること。
オリジン画像のサイズと解像度が画像変換機能の制限を超えていないこと。詳細については、「使用制限」をご参照ください。
オリジン画像のフォーマットが JPEG、JPG、PNG、WebP、BMP、GIF、TIFF、JPEG 2000、または AVIF であること。フォーマットは、Content-Type レスポンスヘッダーまたはリクエストのファイル拡張子によって決定されます。
アダプティブ WebP と アダプティブ AVIF の両方を有効にした場合、ESA ノードは画像を AVIF 形式に変換します。

変換の検証

元のリクエスト

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 指定回転：rotate	メタデータに基づいて画像を自動的に回転させるか、指定した角度で時計回りに回転させます。
画像の色	輝度：bright コントラスト：contrast シャープ化：sharpen	画像の輝度、コントラスト、鮮明度を調整します。
ウォーターマークの追加	watermark	画像またはテキストのウォーターマークを画像に追加します。
情報の取得	info	寸法、フォーマット、品質などの画像情報を取得します。

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

サイト全体の設定は、サイトのすべてのリクエストに適用されます。特定のリクエストに対してのみ画像変換を有効にするには、目的のリクエストに一致する条件を持つルールベースの設定を使用します。サイト全体の画像変換に対応するルールベースの機能は、Image Optimization です。

Object Storage Service (OSS) の画像処理との比較

ESA の画像変換と OSS の画像処理はどちらも、URL パラメーターを使用して画像を変換します。ESA はエッジで画像を処理するため、エッジアクセラレーションのシナリオに適しています。Object Storage Service (OSS) はストレージ側で画像を処理するため、ストレージのシナリオに適しています。すでに OSS の画像処理を使用している場合は、シナリオに基づいて選択してください。エッジアクセラレーションには ESA を使用し、ストレージには OSS を使用します。