新サービス Cloudflare Images で画像リサイズと Polish どっちもかけちゃおう

#Cloudflare

Jiyoung.Kimキムジヨン

2021.10.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Cloudflare Speed の画像最適化オプションであるリサイズとPolish(クオリティ調整)なのですが、併用ができないのでどうしても物足りなさがありました。画像配信に特化した新しいサービス Cloudflare Images がリリースされ、もしかしたら同時にかけられるのではと期待｡('-'｡)(｡'-')｡ﾜｸﾜｸ

結論：できました！

ちなみに Cloudflare 上にドメインが乗っていなくても使えます。ドキュメント - https://developers.cloudflare.com/images/

サービスの概要を読んだ感想

配信と保管と最適化を全部 Cloudflare でやってしまおうということらしいです。

ストレージ、変換プラットフォーム間データ送信コストがなくなる
"保存された画像"はオリジナルだけをカウントします。変換されたバージョンには費用がかからないのも大きなメリットですね。

保存された画像100,000ごとに月額$ 5を支払い、配信された画像100,000ごとに$ 1を支払います。

始める前に

最終的にはこんな URL ができるのでこれをWebサイトに張り付けることになります。

https://imagedelivery.net/:accounthash/:image_id/:variant_name

画像(:image_id)に対して指定した最適化処理(:variant_name)を行い、画像を返します。フォーマットについては、自動で WebP, PNG, JPEG, GIF へ変換してくれます。

やってみた

1. Imagesを開きます

アカウントホームの右ペインに入り口がありました。

2. まずは画像をアップロード

直感的なドラッグ&ドロップと、API が用意されています。

API を使うときは API トークンが必要ですね。API トークン取得画面よりカスタムトークンを作成してください。トークンのアクセス許可を以下のように選択します。

Images 画面に戻り、取得したトークンとファイル名を入力すると curl コマンドを編集してくれます。

次に、ターミナルを開いたら、アップロードするファイルの場所へ cd ﾄﾞｺﾄﾞｺで移動し、curl を叩きます。レスポンスにこちらがあればアップロード成功です。

"success": true,

アップした画像の編集画面には、バリアント毎のプレビューが表示されますね。

3. バリアントを設定します

もう設定の終盤です。このバリアントは現在(10/2021)のところ 20 まで作成できます。

縦横のサイズ : サイズや比率についてはこんな記事も参考になります。
メタデータの扱い
Fit(合わせる)値 :

Fit 値	詳細
Scale Down	指定された幅または高さに完全に収まるように画像が縮小されますが、拡大はされません。
Contain	縦横比を維持したまま、指定された幅または高さの範囲内でできる限り大きくなるようにサイズ変更（縮小または拡大）されます。
Cover	幅と高さで指定された領域全体を正確に埋めるようにリサイズされ、必要に応じてクロップされます。
Crop	幅と高さで指定された領域内に収まるように縮小され、クロップされます。拡大はされません。指定された寸法よりも小さいイメージの場合は、スケールダウンと同じになります。指定された寸法よりも大きい画像の場合は、カバーと同じになります。
Pad	アスペクト比を維持したまま、指定された幅または高さ内で可能な限り大きくなるようにリサイズ（縮小または拡大）され、余った領域は背景色（デフォルトでは白）で塗りつぶされます。