03-5211-7750 平日|09:30~18:00

Cloudflare Imagesを利用した画像変換の手順を解説【画像アップロードで完了】

           

サービス資料や
ホワイトペーパーはこちら

           資料を【無料】ダウンロードFREE

Cloudflare Imagesとは

Cloudflare Imagesは分かりやすい課金形態と、画像のアップロードや加工、配信までワンストップでできることが特長のソリューションです。

全てのプランで利用可能で、料金は画像格納10万点あたり$5、画像配信10万点あたり$1です。リサイズや最適化に下り通信(エグレス)料金や追加料金はかかりません。
Cloudflare Imagesにはエグレス料金がかからないことと、リサイズされた画像の保存に料金がかからないことから、画像が大量に使用されているサイトではコストカットが期待できます。
例えば、アップロードした画像を3種類の方法でリサイズして配信する場合でも、元の画像保存に対してのみ料金が発生します。
また、リサイズの方法も発行される画像のURLにバリアント(詳細設定)を指定するだけなので、Photoshopなどで加工する手間も削減できます。

画像のアップロードには、UIにドラッグ&ドロップする方法のほか、APIを利用することも可能です。
SignedURL(著名付きURL)にも対応しており、セキュアな配信も可能です。
 参考コラム:Cloudflare Imagesとは


今回はCloudflare Imagesを利用した際の、アップロード→画像変換→配信までの流れについて解説します。

利用方法

1、アップロード
ドラッグ&ドロップで画像をアップロードします。



APIでアップロードする場合は、下記のように行います。
curl -X POST -F file=@./<file_name>
-H "Authorization: Bearer <api_token>"
https://api.cloudflare.com/client/v4/accounts/<account_id>/images/v1


2 、画像変換テンプレートの作成
変換を行うサイズを記載したテンプレートを作成します。
今回は300x400に変換、かつ、不要メタデータの削除を行います。




3、配信(CDN)
変換が完了した画像は次のようなURLで配信することができます。
https://imagedelivery.net/XXX/<image_id>/<variant_name>




このように、画像を用意するだけで残りの工程はすべてCloudflare上で完結することができました。
各種APIも用意されており、既存の仕組みにアドオンすることも可能かと思います。

Cloudflare Images以外の画像変換サービス

最後に、Cloudflareには合計3つの画像変換サービスがありますので、ここで簡単に触れておきます。

Polish
無料の画像変換サービス。
画像URLの変更を伴うことなく、画像の最適化、WebP変換などが可能です。

Image Resize
有償の画像変換サービス。
画像URLの変更は伴いますが、画質の最適化(任意のパーセンテージ)、リサイズ、WebP化、レスポンシブ画像など、多くの変換機能を有しています。


Cloudflareに、アクセリアの運用サポートをプラスしたCDNサービスを提供しています

アクセリア自社CDNの開発と運用は、20年以上にわたります。それらの経験とノウハウを駆使したプロフェッショナルサポートをパッケージしたサービスが、[Solution CDN]です。
移行支援によるスムーズな導入とともに、お客様の運用負担を最小限に​とどめながら、WEBサイトのパフォーマンスとセキュリティを最大限に高めます。運用サポートはフルアウトソーシングからミニマムサポートまで、ご要望に合わせてご提供します。
 参考コラム:CDNとは?CDNの基本からメリット・デメリット、業者選定のポイントを解説

Cloudflare(クラウドフレア)の導入・運用にサポートが必要な方は、お気軽にお問い合わせください。

Cloudflareの導入・運用について ご相談いただけます。 導入に関するご相談だけでなく、運用についてもご相談ください。


◆Solution CDNについてはこちら
 [CDN開発/運用のエキスパート] x [世界最大のCDN/最先端のセキュリティ]Solution CDN/
◆お問い合わせ
 こちらから
◆資料DL
 こちらから

■関連コラム
 ・Cloudflareの「待合室(Waiting Room)」とは?

柴崎 智弥

アクセリア株式会社 サービス事業本部サービス開発部 所属
Contact usお問い合わせ

サービスにご興味をお持ちの方は
お気軽にお問い合わせください。

Webからお問い合わせ

お問い合わせ

お電話からお問い合わせ

03-5211-7750

平日09:30 〜 18:00

Download資料ダウンロード

製品紹介やお役立ち資料を無料でご活用いただけます。

Magazineメルマガ登録

最新の製品情報などタイムリーな情報を配信しています。

Free Service

PageSpeed Insights シミュレータ

CDNによるコンテンツの最適化を行った場合のPageSpeed Insightsのスコアをシミュレートしてレポートします。