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

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 アスペクト比を維持したまま、指定された幅または高さ内で可能な限り大きくなるようにリサイズ(縮小または拡大)され、余った領域は背景色(デフォルトでは白)で塗りつぶされます。

 

4. 画像配信 URL を埋め込み、確認します

左ペイン動画配信 URL の後半部分にイメージ ID とバリアント名を追加します。もしくは画像イメージのプレビューにイメージ URL がありますのでこちらをコピーしても OK です。ペタペタ

<img src="https://imagedelivery.net/アカウント固有id/イメージid/指定するバリアント名">

 

リサイズもPolishも変換も全て上手く同時に処理されました! 画像のリサイズ(1024 x 768) 画質の調整(cf-bgj: imgq:86) フォーマットの変換(content-type : image/webp)

以上、読んでいただき、ありがとうございます。

 

リリース予定の機能

  • AVIF サポート : より小さいファイルサイズとロードタイムの短縮
  • ぼかし効果をバリアントに追加
  • 画像の使用分析

これからどんどん新しい機能が追加されるようです。楽しみです。 ちなみに動画配信サービスとして Cloudflare Stream というサービスもあります。ご参考までに。