サムネイル呼び出しURLの作成方法
サムネイル呼び出しURLは商品登録当時の[CDNドメイン] + [オブジェクトストレージ内のファイルのパス] + [サムネイル作成のオプション]の3つの領域で作成されます。
Image Optimizerがサポートするサムネイル作成のオプションはQuery Stringを使って作成されます。 サムネイル作成の結果はQuery Stringのパラメータ(オプション)の順番に影響されません。
- 形式:
https://{CDN-DOMAIN}/{FILE-PATH-IN-OBJSTORAGE}?{QUERYSTRINGS} - 例示:
https://abc123xyz.cdn.ntruss.com/a/b.jpg?type=h_wm&h=780&quality=90&autorotate=true
ただし、実行結果同じサムネイルを作るQuery Stringでも、パラメータのデフォルト値を設定するかどうかによって新しい変換のリクエストとして認識し、変換の回数が加算される可能性があるので、ご注意ください。例えば、/a.jpg?type=f&w=40&h=40と/a.jpg?type=f&w=40&h=40&quality=90は完全に同じサムネイルを作成しますが、それぞれに課金される可能性があります。
Query Stringのご説明
Query Stringを構成するオプションは、大きくtypeパラメータ従属のオプションとすべてのtypeに共通して適用されるような全域オプションに分けることができます。
全域オプション
- quality: ソースイメージがJPEGの形式の場合のみ該当し、 1~100範囲の整数で設定(デフォルト値: 90)
- autorotate: true/falseの文字列で設定し、EXIFの回転情報をベースに結果のサムネイルを自動回転(デフォルト値: true)
- anilimit: GIF形式に複数枚のフレームが存在する場合、一定フレーム以降は削除、前から表示されるフレームの数は1~100(デフォルト値: 1)
- type: サムネイルのフォーマットタイプの設定(jpg, gif, png)、設定しない場合はソースのフォーマットと同じ
typeパラメータと従属オプション
サイズ
リサイズおよびクロップ(type=f): ソースの比率を維持し、イメージのサイズを縮小または拡大した後で残る領域をクロップ
- w: 横の長さ、1以上の整数、必須入力
- h: 縦の長さ、1以上の整数、必須入力
- align: クロップして残す位置、9分割位置、0~8、デフォルト値4(中央)
- faceopt: 顔認識を適用するかどうか、true/falseの文字列、デフォルト値"false"
リサイズ(type=m): 設定した横、縦のサイズの中に入るようにイメージのサイズを変更
- w: 横の長さ、1以上の整数、必須入力
- h: 縦の長さ、1以上の整数、必須入力
- bgcolor: 上下または両端に入れる色、存在しない場合は横と縦の値が無視される(16進数RGB色の値、6文字の文字列)
- extopt: サムネイルがソースより小さい場合拡大するかどうか、整数3の場合は拡大、デフォルト値0(ソースのサイズを維持)
横変換(type=w): ソースの比率を維持し、横の長さを基準にイメージのサイズを変更
- w: 横の長さ、1以上の整数、必須入力
- extopt: サムネイルがソースより小さい場合拡大するかどうか、整数3の場合は拡大、デフォルト値0(ソースのサイズを維持)
縦変換(type=h): ソースの比率を維持し、縦の長さを基準にイメージのサイズを変更
- h: 縦の長さ、1以上の整数、必須入力
強制変換(type=u): ソースの比率を無視して希望するサイズに強制変更
- w: 横の長さ、1以上の整数、必須入力
- h: 縦の長さ、1以上の整数、必須入力
ウォーターマーク
- ウォーターマーク(type=wm)
- wm_path: ウォーターマークを入れるイメージのURL(HTTPを含む、必須). 透かし画像がデフォルトの画像よりも小さくする。
- wm_align: ウォーターマークの位置を指定する際の基準点、各9分割領域の左上の地点、0~8、デフォルト値4
- wm_offx: 基準点より右の方に離れた距離、0以上の整数、デフォルト値0
- wm_offy: 基準点より下の方に離れた距離、0以上の整数、デフォルト値0
フィルタ
Sharpen(type=sh): イメージが鮮明に見えるようにする効果
- sharp_amt: 輪郭線の明度対比を与える程度、必須入力
Blur(type=bl): イメージがかすんで見えるようにする効果
- blur_rad: 効果を適用するためのマスクのサイズ(ピクセルの半径)
- blur_sig: ブラーマスク内で適用する分散の程度、必須入力
Black & White(type=bw): イメージの色を白黒に変更
多重typeのパラメータ
サイズ、ウォーターマーク、フィルタはデリミタである_を基準に最初から順番に適用されます。
例: f_wm(リサイズおよびクロップ処理の後、ウォーターマークを適用), bw_wm(白黒処理の後、ウォーターマークを適用)
例題
リサイズおよびクロップ
- 横100、縦100に減らした後、残る部分はクロップ
/ファイル名.jpg?type=f&w=100&h=100
リサイズ
- 回転情報がある場合は回転し、"横320、縦320"のフレームの中に入るように比率を維持および縮小、余白をFFFFFA色で塗ってJPGE quality 95で圧縮
/ファイル名.jpg?type=m&w=320&h=320&autorotate=true&bgcolor=FFFFFA&quality=95
リサイズの後、ウォーターマーク
- ソースがサムネイルより小さい場合は拡大、512x1024に縮小あるいは拡大した後、余白を000011色で塗る
- その後、特定のイメージのURLを利用し、右上を基準に横11ピクセル、縦10ピクセル移動してウォーターマークを入れる
- GIFアニメーションの場合、最大100枚に対して同じ作業を実行
/ファイル名.jpg?type=m_wm&w=512&h=1024&bgcolor=000011&wm_path=http://watermark_URL&wm_offx=11&wm_offy=10&wm_align=2&anilimit=100&extopt=3
リサイズの後、sharpenフィルタを適用、イメージフォーマットをpngに変更
/ファイル名.jgp?m_sh&w=512&h=256&ttype=png
