画像配信にCloudflare Imagesを使っている理由

このブログの画像はすべてCloudflare Imagesで配信しています。

「なんで専用サービスを使うの？」と思う人もいると思うので、その理由をまとめてみました。

この記事のポイント#

画像配信、みんなどうしてる？#

ブログを始めたとき、「画像ってどこに置けばいいんだろう？」というのが最初の疑問でした。

WordPressを使っているサイトだとサーバー内に画像を保存することが多いようです。でも、その場合は画像が増えるたびにサーバーのストレージが圧迫されていきますし、スマホ用・PC用など複数のサイズを管理しようとすると途端に複雑になります。

調べてみると、画像配信に特化したサービスがいくつかありました。

そのなかで選んだのが Cloudflare Images です。

1枚保存すれば、あとは自動#

Cloudflare Imagesの一番大きなメリットは、画像を1枚アップロードするだけで、さまざまなサイズや形式に変換して配信してくれることです。

具体的には、配信URLの末尾にパラメータを付けることで、サイズや画質を動的に変えられます。

1
2
3
4
5
6
7
8
9

# 横幅800pxで配信（スマホ向け）
https://imagedelivery.net/.../width=800,quality=70

# 横幅1900pxで配信（Retina向け）
https://imagedelivery.net/.../width=1900,quality=70

これを使って、スマホ・PC・Retinaディスプレイ（MacBookなど）それぞれに合わせた画像を出し分けています。

srcsetで自動的に最適なサイズを選ぶ#

では、どうやってデバイスごとに出し分けるのかというと、HTMLの srcset 属性を使っています。

srcset は「この幅のときはこの画像を使ってね」という情報をブラウザに伝える仕組みです。

ブラウザ側が画面の解像度や表示サイズを判断して、最適なURLにリクエストを送ってくれます。

このブログで実際に使っているサイズはこの3つです。

sizes 属性には (max-width: 768px) 100vw, 1000px を指定していて、スマホ幅（768px以下）では画面幅いっぱい、それ以上は1000px幅として扱うようブラウザに伝えています。

あとはブラウザが画面の解像度を見て、800・1000・1900pxのなかから適切なサイズを選んでリクエストしてくれます。

保存している画像は 1枚だけです。

でもCloudflare Imagesがその1枚からサイズを作ってくれるので、ストレージの無駄もありません。

フォーマット変換はブラウザとの対話で決まる#

画像フォーマットにはJPEGやPNGのほかに、より効率的な WebP や AVIF というフォーマットがあります。

同じ画質でもファイルサイズが小さくなるため、ページの表示速度が上がります。

ブラウザ（ChromeやSafariなど） と Cloudflare Images が人物のように振る舞うとしてストーリーみたいにしてみます。

この2人はHTTPリクエスト・レスポンスのやりとりで会話しています。

ブラウザ：「この画像をください。ちなみに私は image/avif と image/webp が使えますよ」 （リクエストの Accept ヘッダーにサポートしているフォーマットを乗せて送信）

Cloudflare Images：「わかりました。では avif で返しますね」 （元の1枚をその場でAVIFに変換して配信）

古いブラウザが「image/avif は使えません、JPEGだけです」と言ってきたら、Cloudflare Imagesはちゃんとそちらに合わせてJPEGを返します。

つまり、自分で複数フォーマットを用意する必要はまったくなく、元の画像を1枚アップロードするだけで済みます。

キャッシュで配信が速い#

Cloudflare ImagesはCloudflareのCDN（コンテンツ配信ネットワーク）上で動いているため、世界中のエッジサーバーにキャッシュが乗ります。

ユーザーのいる場所に近いサーバーからキャッシュを返してくれるので、画像の読み込みが速くなります。画像配信に特化したサービスを使うメリットのひとつです。

まとめ#

Cloudflare Imagesを選んだ理由をまとめると、こうなります。

• 画像を1枚保存するだけで、複数サイズを動的に生成できる
• srcset との組み合わせで、スマホ（800px）・PC（1000px）・Retina（1900px）それぞれに最適な画像を届けられる
• ブラウザがサポートするフォーマットを Accept ヘッダーで伝え、Cloudflare ImagesがWebP・AVIFを自動で返してくれる
• Cloudflareのエッジにキャッシュが乗るので配信が速い

「画像をどこに置こうか」と悩んでいる人には、Cloudflare Imagesは十分に候補に入れる価値があると思います。特に複数デバイスへの最適化を手間なくやりたい場合には、かなり相性がいいサービスです。

関連記事