CloudflareのImage Resizingを使ってサクッと画像最適化をする方法

スマートキャンプ、エンジニアの入山です。

皆さんが運営されているWebサイトには、画像が何枚使われていますか？

また、その画像たちは最適化（表示領域に対して画像のサイズや画質が適切に設定）されていますか？

Webページの評価基準としてCore Web Vitals（CWV）が重要視されている昨今においては、表示速度（Performance）と向き合う機会が増え、配信する画像のサイズや画質にも気を配る必要が出てきました。

しかし、Webサイト上に数多く存在する画像を自前で最適な状態に管理して配信するのは簡単ではないため、対応できていないケースも多いのではないでしょうか。

弊社も画像の最適化には長らく対応できていない状況でしたが、CDNの機能を活用することで比較的簡単に改善できました。

本記事では、CDN（Cloudflare）での画像最適化（Image Resizing）について、紹介したいと思います！

CDNでの画像最適化の概要
Cloudflareでの画像最適化設定
画像最適化の効果
- 画像変換の例
- Lighthouseの評価
まとめ

CDNでの画像最適化の概要

CDNでの画像最適化は、Webサイトの画像をCDNのエッジ上で動的に加工・変換する機能です。
CDNで元画像を動的に変換して配信することにより、画像の管理コストはそのままにマルチデバイス対応などで必要な画像の加工・変換を簡単に実現できるメリットがあります。

画像最適化の主な機能としては、以下が挙げられます。

サイズ変更
画質調整
圧縮
WebPやAVIF形式への変換

機能名称や詳細な仕様は異なりますが、CloudflareやAkamaiなど、ほとんどのCDNで提供されています。

弊社ではCDNにCloudflareを採用しているため、本記事ではCloudflareでの画像最適化の設定方法を紹介します。

Cloudflareでの画像最適化設定

Cloudflareで画像最適化（Image Resizing）を利用するには、以下2つの方法が存在します。

各画像URLに画像最適化のパラメタを付与する方法
Cloudflare Workersで画像へのリクエストをハンドリングして一括適用する方法

1の方法は、各画像URLにパラメタを含む形式で設定を行なうため、画像ごとに最適なパラメタを指定しやすいですが、各画像URLの修正が必要となります。詳細は公式ドキュメントを参照してください。

// 形式
https://ZONE/cdn-cgi/image/OPTIONS/SOURCE-IMAGE

// サンプル（後述のWorkersと同じオプションを指定）
https://example.com/cdn-cgi/image/fit=scale-down,width=400,height=300,quality=90,format=auto/image.jpg

2の方法は、Cloudflare Workersを使って設定を行ない、画像リクエストをエッジ上で処理するため、既存コードの修正なしで画像最適化を広範囲に一括適応できます。

今回は、2の方法で設定していきます。

利用条件

前述2の方法には、以下が必要となります。
（※ 2021/10/28時点の情報です。最新の情報は、公式サイトを参照してください。）

Proプラン（$20/月）以上の契約
利用料金
- Image Resizing
  - $9/5万リクエストごと（最初の5万リクエストまでは無料）
- Workers
  - $5/月（1000万リクエストまで）+ $0.5/100万リクエスト毎

以前はBusinessプラン（$200/月）以上でしか使えなかったのですが、現在はProプランから利用できるようになっており、導入しやすくなっています。

Image Resizing機能の有効化

Image Resizingを利用するには、Cloudflareの管理画面から機能の有効化が必要です。

CloudflareダッシュボードのSpeedを押す
最適化タブを押す
Image Resizing項目を有効化

機能が無効化されていたり、前項のプラン条件を満たしていない場合は、次項でWorkersを実装しても画像が最適化されないため、注意が必要です。

Workersの設定

Cloudflare Workersは、CDNの各エッジでスクリプトを実行できるサーバーレスなサービスです。

今回は、画像へのリクエストをWorkersでハンドリングして、Image Resizingで最適化したものを返す仕組みとなります。

1. Workersの作成

以下の通り遷移し、Workerを作成します。

CloudflareダッシュボードのWorkersを押す
Workers項目のWorkersを管理するを押す
Workersタブ内のWorkerを作成を押す

スクリプトを記述するコンソールが表示されるので、Image Resizingを適用するためのスクリプトを記述します。以下は、スクリプトのサンプルです。

addEventListener("fetch", event => {
  // リクエストループ防止
  if (/image-resizing/.test(event.request.headers.get("via"))) {
    return fetch(event.request)
  }

  // 適応対象画像を拡張子で判定
  if (event.request.url.match(/\jpg$|jpeg$|png$/i)) {
    return event.respondWith(handleRequest(event.request))
  } else {
    return fetch(event.request)
  }
})

async function handleRequest(request) {
  const url = new URL(request.url)

  const imageRequest = new Request(url, {
    headers: request.headers,
  })

  // リクエスト元ブラウザがWebPに対応していればwebpに変換
  const acceptHeader = Object.fromEntries(request.headers).accept
  const format = acceptHeader.match(/image\/webp/) ? 'webp' : ''

  // 画像最適化のオプション指定
  const options = {  
    cf: {
      image: {
        fit: "scale-down",
        width: 400,
        height: 300,
        quality: 90,
        format : format
      }
    }
  }

  const response = await fetch(imageRequest, options)

  if (response.ok || response.status == 304) {
    return response
  } else {
    // 画像最適化がエラーになった場合は元画像にリダイレクト
    return response.redirect(imageRequest, 307)
  }
}