画像編集機能を使用すると、ソースファイルを変更することなく、CDN エッジで画像の変換 (サイズ変更、切り抜き、フォーマット変換、ウォーターマークの追加など) を行えます。コンソールで自動変換を構成し、画像URLにパラメーターを追加することでオンデマンド変換を適用できます。
Alibaba Cloud CDN の画像編集機能、DCDN の画像編集機能、および Object Storage Service (OSS) の Image Processing (IMG) 機能は、それぞれ異なる機能です。画像編集は、別途通知があるまで無料です。
前提条件
開始する前に、以下を確認してください。
構成済みで実行中の Alibaba Cloud CDN ドメイン名
Alibaba Cloud CDN コンソールへのアクセス
画像編集の有効化
Alibaba Cloud CDN コンソールにログインします。
左側のナビゲーションウィンドウで、[ドメイン] をクリックします。
[ドメイン名] ページで、管理するドメイン名を見つけ、[操作] 列の [管理] をクリックします。
左側のナビゲーションツリーで、[最適化] をクリックします。
[画像編集] セクションで、[画像編集] をオンにし、変換する画像フォーマットを少なくとも 1 つ選択します。次の表では、構成オプションについて説明します。
画像編集は、少なくとも1つの画像フォーマットを選択した場合にのみ有効になります。URLベースの画像編集パラメーターは、画像編集が有効になっている場合にのみ有効になり、それ以外の場合は無視されます。
パラメーター 説明 備考 サポートされている画像フォーマット 変換する画像フォーマット。1つ以上のフォーマットを選択します。必須。 N/A WebPへの自動変換 リクエストの Acceptヘッダーにimage/webpが含まれている場合、CDN は他のフォーマットの画像を WebP に自動的に変換してキャッシュします。例:Accept: image/webp有効化後、キャッシュヒット率は一時的に減少しますが、画像が変換されると回復します。ピーク時には有効にしないでください。 自動回転 CDN は画像を自動的に回転します。 auto-orientパラメーターを持つ画像にのみ適用されます。有効化後、キャッシュヒット率は一時的に減少しますが、画像が回転されると回復します。ピーク時には有効にしないでください。 自動圧縮 解像度、ディメンション、フォーマットを変更せずに画像ファイルサイズを削減します。有効な値: 0(無効) または1～100(圧縮レベル)。例:90は画質を元の90%に低下させます。デフォルト:0。JPEG および WebP 画像のみをサポートします。 ソース画像キャッシュ ソース画像に複数の変換バージョンがある場合、オリジンリクエストを削減するためにソース画像をキャッシュします。 N/A 
[OK] をクリックします。
JPEG から WebP、JPEG から PNG、または PNG から WebP など、画像フォーマット間で変換すると、異なる圧縮アルゴリズムが使用されるため、元のファイルよりも大きくなる場合があります。変換後にファイルサイズを削減するには、quality パラメーターを低い値に設定してください。
URLパラメーターを使用した画像処理
画像編集を有効にした後、任意の画像URLに image_process クエリパラメーターを追加することで、オンデマンドで変換を適用できます。
URLフォーマット:
http://example.com/image_01.png?image_process=action,param_value/action,param_value| フィールド | 説明 |
|---|---|
example.com | ご利用の高速化ドメイン名 |
image_01.png | 画像ファイル名 |
image_process | 画像編集のクエリパラメーターキー |
action,param_value | 操作とその値。複数の操作は / で区切ります。 |
例:
http://example.com/image_01.png?image_process=resize,w_200/rotate,90/format,webpこのURLは、次の3つの操作を順番に適用します。
画像の幅を200 pxにサイズ変更し、元の縦横比を維持するために高さを比例してスケーリングします。
画像を時計回りに90度回転します。
画像をWebPフォーマットに変換します。
CDN は、URLに表示される順序で操作を適用します。各操作の出力は、次の操作の入力になります。
画像編集パラメーター
以下のパラメーターがサポートされています。CDN は、URLで指定された順序で複数のパラメーターを適用します。
| 機能 | パラメーター | 説明 |
|---|---|---|
| 画像フォーマットの変換 | format | 画像を特定のフォーマットに変換します。例: format,webp |
| 画質の調整 | quality | 画質を調整します。例: quality,80 |
| 画像の切り抜き | crop | 画像を特定のディメンションに切り抜きます。例: crop,w_200,h_200 |
| 画像のサイズ変更 | resize | 画像のサイズを変更します。画像サイズの縮小のみをサポートします。例: resize,w_200 |
| 画像の回転 | auto-orient | EXIFの印刷の向きメタデータに基づいて画像を自動的に回転します。例: auto-orient,1 |
| 画像の回転 | rotate | 画像を時計回りに指定された角度で回転します。例: rotate,90 |
| 画像の色変更 | bright, contrast, sharpen | 輝度、コントラスト、シャープネスを調整します。例: bright,50 |
| ウォーターマークの追加 | watermark | 画像に画像またはテキストのウォーターマークを追加します。 |
| 画像情報のクエリ | info | 画像メタデータ (幅、高さ、フォーマット、品質) を返します。 |