カテゴリー
Web開発 クラウドサービス

imgixでお手軽に画像配信を最適化

読者のみなさま、ご無沙汰しております。管理人のたかきです。

最近、新しいウェブアプリケーションを開発しており、今のところ約半年を費やしてアカウント管理機能を作っております。

その中で、の画像のような感じでユーザーのプロフィール画像(アイコン)を設定する機能を作っていたのですが、画像のアップロードを受けとり、ユーザーの指定に従って正方形に切り取ってGoogle Cloud Storageへアップロードするまでの処理はできたのですが、問題は画像の配信です。

Exifのオリエンテーション補正や、Reactのクロップツールの導入、Node.jsでの画像クロップなど、なかなか大変でした…

マスター画像は400x400pxでGCS上に保存してあり、独自ドメインでCloudFlareのCDNを経由するよう設定していたため、生のURLをクライアントからリクエストされた場合でもキャッシュヒットをすることは可能なのですが、いかんせん参照する際に400pxの画像をいちいちリクエストするのは無駄がありすぎます…

たとえばちょっとした右上のアカウントアイコンは50pxもあれば十分ですから、400pxの画像をリクエストするのは時間もかかりますし、ユーザーのデバイスの通信量も消費してしまいます。

そこで、画像配信に特化したCDNを導入してみましたので、今回はそのご紹介です。