新サービス 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 まで作成できます。

 

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 というサービスもあります。ご参考までに。