画像リサイズ

Image Resizingを発表

Cloudflareは、画像最適化スイートにもう一つ重要な製品 Image Resizing を加えました。この製品で、主要な画像処理アクションを存分に実行することができます。

リサイズ - 元画像を特定の高さと幅にリサイズします。このアクションにより、用途に合わせてさまざまなサイズのバリアントを作成することができます。

トリミング - 元画像のアスペクト比を変え、一部を切除する形でリサイズします。これは、画像の一部分のみを残してフォーマット変換に対応しなければならないヘッドショットや製品画像を扱う際に特に便利です。

圧縮 - 不可逆圧縮によって元画像のファイルサイズを縮小します。画質が多少悪くなってもファイルサイズを小さくしたい場合に使います。

[WebP](https://en.wikipedia.org/wiki/WebP)変換 - ユーザーのブラウザがWebP対応していれば、元画像をWebPに変換します。WebP画像は、高度に最適化された最新の画像フォーマットで配信されます。

顧客はこれらのアクションを組み合わせて、サーバー上に単一の高画質画像を格納し、各ユースケースに合わせて専用バリアントをImage Resizingで作成することができます。なお、バリアントはすべてCloudflareのグローバルキャッシュにも自動的に格納されます。特別な操作は必要ありません。

例

eコマースのサムネイル

eコマースサイトは通常、各商品の高画質画像を格納しています。その画像を元に、商品の見せ方によってさまざまなバリアントを作成する必要があります。カタログ表示のためのサムネイル作成がその一例です。下記に置かれた高画質画像を見つけたら、Image Resizingを使ってやってみましょう。

https://example.com/images/shoe123.jpg

Image Resizingを使って75ピクセル四方のサムネイルを表示する方法がこちらです。

<img src="/cdn-cgi/image/width=75,height=75/images/shoe123.jpg"/>

レスポンシブな画像

さまざまなタイプやサイズのデバイスに対応するようサイトを調整する際は、常に適切なサイズの画像を使用することが重要です。これは、画面の一定割合を占めるよう意図した画像では難しい場合があります。この問題の解決には、が使えます。 Image Resizingがなければ、同じ画像のバージョン違いをいくつも作成して格納しなければなりません。この例では、高画質の hero.jpgが１つ格納されていて、Image Resizingを使って必要に応じて特定サイズにリサイズします。

<img width="100%" srcset=" /cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w, /cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w, /cdn-cgi/image/fit=contain,width=960/assets/hero.jpg 960w, /cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w, /cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w, " src="/cdn-cgi/image/width=960/assets/hero.jpg"/>

URL変更せず最大サイズを適用

Image ResizingはCloudflare Workerでも利用できます。Workersでコードを書くことができ、そのコードは世界中のユーザーの近くで実行されます。たとえば、URLは変えずにImage Resizingを画像に追加したいという場合、ユーザーとクライアントがいつもと同じ画像URLを使えるようにしつつ、必要に応じて画像を透過的に修正します。

画像URLと適合するルートにWorkerをインストールし、限度より大きな画像のサイズを変更することができます。

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return fetch(request, {
    cf: {
      image: {
        width: 800,
        height: 800,
        fit: 'scale-down'
      }
    }
  });
}

Workerは単なるコードに過ぎませんから、画像拡張子のあるURLのみでWorkerを実行することも、モバイルクライアントへの配信画像だけをリサイズすることも簡単にできます。

Cloudflareと画像

Cloudflareは長年、画像配信を加速するツールの構築に取り組んできました。当社のキャッシュは、画像のコピーをユーザーの近くに格納することによって遅延を軽減してきました。[Polish](https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/)は、可逆と不可逆の両方の画像圧縮オプションを自動化し、画像から不要なバイトを取り除きます。[Mirage](https://www.cloudflare.com/website-optimization/mirage/)は、デバイスタイプに応じて画像配信を加速します。これらのツールは、Web上の画像体験を改善する上で固有の役割を担っています。当社は今後も、これらすべてに投資を続けていきます。

Image Resizingは、Cloudflareが画像配信方法の完全なコントロールを開発者に与えた初の画像製品という点で特異です。配信される画像のサイズを事前に、あるいはCloudflare Worker内で定めておく方が楽だという方は、Image Resizingを選ばれるとよいでしょう。

次のステップとシンプルな価格設定

現在、Image Resizingをご利用いただけるのは、BusinessプランとEnterpriseプランのお客様です。有効化するには、Cloudflareダッシュボードにログインし、Speedタブを開いてください。Image Resizingのセクションがあり、クリック１回で有効化できます。

この製品はBusinessプランとEnterpriseプランに含まれており、追加コスト不要でたっぷり使えます。Businessプランのお客様は月あたり10万リクエストを限度とし、それ以上については10万リクエストごとに10ドルが課金されます。Enterpriseプランのお客様は月あたり1000万リクエストを限度とし、それ以上については段階別の割り引きが適用されます。リクエストは、Image Resizingを含むURIのヒット、あるいはWorkerからのImage Resizing呼び出しと定義します。

Image Resizingを有効化したら、お客様の画像をリサイズしてみましょう。

1. 既存サイトを使って、画像をここに格納してください。

https://yoursite.com/images/yourimage.jpg

2. このURLを使って画像をリサイズします。

https://yoursite.com/cdn-cgi/image/width=100,height=100,quality=75/images/yourimage.jpg

3. 値を変更してみましょう。

幅=、高さ=、画質=

上記のインストラクションでは、Image Resizing用のデフォルトURLフォーマットを使っています。オプション、ユースケース、互換性の詳細については、当社の開発者向けドキュメントをご覧ください。