速くする：軽い画像を届ける

スマホで撮った写真は、1枚で3MBを超えることがあります。それを一覧に20枚並べたら、60MBです。開くたびに60MB。これは遅いというより、失礼な作りです。この章で直します。

なぜ重いのか

原因は単純です。4000ピクセルの写真を、200ピクセルの枠に押し込んでいるからです。表示は小さくなりますが、送られてくるデータは元のままです。20分の1の大きさで表示するために、20倍のデータを運んでいます。

手当て1：そもそも小さい版も保存しておく（ドメイン不要）

一番確実で、誰でも今すぐできる方法です。アップロードのときにブラウザ側で縮小した小さい版も作って、2つ保存します。一覧では小さい版、拡大表示では元の版を使います。

この方法の良いところは、ドメインが無くても動くことと、追加料金がかからないことです。欠点は、あとから「もっと小さくしたい」と思っても、保存済みの分は作り直しになることです。

手当て2：Cloudflareに変換させる（ドメインが必要）

Cloudflareには、画像を届ける瞬間に加工する仕組みがあります。R2には元の写真だけを置いておいて、URLで大きさを指定すると、その場で縮小されたものが返ってきます。あとから何度でもサイズを変えられるので、こちらのほうが本来は筋がいいです。

ただし前提が1つあります。この機能は、Cloudflareに追加したドメイン（ゾーン）に対して、自分で有効にする必要があります。第7章でドメインをつないでいない人は、まだ使えません。飛ばして構いません。

有効にする場所は、管理画面のメディア → Images → Transformations です。ゾーンの一覧に自分のドメインが「無効」と並んでいるので、右端のメニューから「有効にする」を選びます。押すだけで、待ち時間はありません。

この画面には「ユニークな変換 0 / 5,000」というカウンタも出ています。今月あと何回変換できるかが、ここで一目で分かります。不安なら、ときどき覗いてください。

お金の話もはっきりさせます。公式の料金ページによると、無料プランでも月5,000回までのユニークな変換が無料です。そして超えたときの挙動が親切で、新しい変換はエラーになりますが、すでに変換済みでキャッシュされているものは、そのまま表示され続けます。サイトが真っ白になるわけではありません。

さらに、写真をR2に置いたまま変換だけ使う場合は、保管料や配信料はかかりません（それらはCloudflare Imagesに画像を預ける使い方のときの料金です）。この教科書の構成なら、変換の回数だけを見ていれば十分です。

手当て3：キャッシュを効かせる

第2章で出てきたキャッシュです。一度届けた画像を、Cloudflareが世界各地に持っておいて、2回目からはそこから返します。変換の回数を減らす意味でも、ここは効きます。

写真は、あとから中身が変わることがほとんどありません。だから長めに覚えさせて構いません。逆に、同じキーで画像を差し替える運用をしていると、古いものが表示され続けます。第9章で「同じキーは上書きされる」と書いたのは、ここにつながっています。差し替えるときは、キーごと変えるのが安全です。

この章のまとめ

元の写真は大事に保管したまま、届けるときだけ小さくする。これが基本の考え方です。ドメインが無ければアップロード時に小さい版を作り、あればCloudflareの変換に任せます。どちらでも、一覧は見違えるほど軽くなります。

次はいよいよ最終章です。ここまで作ってきた部品を1つの作品にまとめて、世界に公開します。