CloudflareのImage Resizingを使ってプレースホルダ画像として表示する

はじめに

Next.jsではpre-renderがデフォルトです。

pre-renderとは、server side renderingとclient side renderingの中間的な存在。(雑な説明です

みなさんはMediumってブログを見たことありますか？

Mediumの記事は画像がピンぼけして、すこしたってからきれいな画像に差し替わりますよね？あんな感じです。

解像度のあらーい画像(数バイト)をしゅっとダウンロードして、それをピンぼけ状態で表示します。

んで、裏ではOriginをダウンロードしていて、完了したときに差し替えるって仕組みです。

これを実現するためには、プレースホルダ用の画像とoriginの両方の画像が必要になります。

いちいち、両方の画像を用意するのは面倒ですよね？ね？

そこでCloudflareのImage Resizingです。

Image Resizing

ビジネスプラン以上にアップグレードして、ぽちっとするだけで利用可能になります。

実際に試してみましょう。

画像のURLがこんなだとします。

https://www.murajun1978.dev/images/profile_image.jpeg

小さくてみにくいですが、8.3kbの画像です。

これくらい小さいと気にはなりませんが、もっと解像度を下げて小さくしてみましょう。

URLはこんな感じになります。

https://www.murajun1978.dev/cdn-cgi/image/width=5,height=5,quality=5/images/profile_image.jpeg

画像は小さくて見えないですよね。。。

↑のオプションを設定しましたところ、875bまで小さくなりました。

ちなみにWebPにも対応してます。

詳しい使い方はこちらを参考にしてください。

まとめ

Reactのsuspenseとかを使うと簡単に実装できますよ。

pre-render時は、CSSのopacityを0.5とかに設定して、画像をぼかして表示します。

で、Origin画像のダウンロードが完了したら、Origin画像が表示されます。

ちょー楽勝ですね！

料金ですが、ビジネスプランは$200/月です。

ビジネスプランでImage Resizingを使う場合、10万リクエストまでは追加料金なしで利用できます。

10万リクエストを超えるたびに$10かかります。

ま、個人のサイトに$200/月はちょっとお高い気もしますが、Image Resizingだけではなく、その他の機能ももりもりついてきます。

前回紹介したWorkersでも利用できるますよ。

Cloudflareをフル活用して、いい感じに手を抜きたい人は、ビジネスプランにアップグレードしてみては？

Enjoy Cloudflare Image Resizing ヘ(^o^)ノ