ブログ記事に画像を20枚以上載せたいけれど、1枚ずつWebP形式に変換するのは面倒——そんな悩みを解決してくれるのが「ImageKit」です。本記事では、ImageKitのアカウント登録からセットアップまでの手順を、スクリーンショット付きで分かりやすく解説します。エンジニアの方が画像配信の効率化を進める際の参考にしてください。
ImageKitとは
ImageKitは、ウェブアプリの画像を指定形式に変換して配信できるサービスです。AWS S3やSupabase Storageなどの既存ストレージと組み合わせることで、プロキシ形式でWebPなど任意の形式に変換しながらCDN配信が可能になります。
たとえばブログ記事のように画像枚数の多いページではWebP形式での配信が望ましいですが、画像を1枚ずつ手動で変換するのは大きな手間です。ImageKitを使えば、元画像をストレージに置いたままで、配信時に自動的に最適な形式へ変換してくれます。
無料枠は月20GBまでと比較的大きく、個人開発や小〜中規模のサービスであれば無料プランでも十分活用できます。
公式サイト: https://imagekit.io/
事前準備
- メールアドレス（アカウント登録に使用します）
- 連携先のストレージ（AWS S3、Supabase Storageなど。後から設定でも可）
手順1: トップページから「Sign Up」を押す
公式サイト https://imagekit.io/ にアクセスし、画面右上の「Sign Up」ボタンを押します。
手順1:トップ画面右上の「Sign Up」を押します。
手順2: 会員登録フォームを入力する
会員登録画面が表示されるので、フォームに必要事項を入力し、「Submit」ボタンを押します。
手順2:会員登録画面になるので、フォームを埋めて「Submit」を押します。
手順3: アンケートに回答する
登録の続きとしてアンケート画面が表示されます。利用目的などを問う内容なので、当てはまる項目を選択して進めてください。
手順3:アンケートになります。
手順4: ID（識別子）を決める
次にImageKit上で使うIDを決定します。このIDは画像の配信URLの一部に組み込まれるため、半角英数字でわかりやすい文字列を設定するのがおすすめです。一度決めると後から変更しづらいので、サービス名やプロジェクト名に合わせて慎重に選びましょう。
手順4:IDを決めます。画像の配信URLの一部になるので、半角英語でわかりやすい文字列がおすすめです。
手順5: 再度アンケートに回答する
もう一度アンケート画面が表示されます。適切に回答して「Submit」を押してください。
手順5:再びアンケート。適切に回答してSubmitで完了です。
手順6: セットアップ完了
ここまで進めればセットアップは完了です。お疲れ様でした！この後はダッシュボードからストレージとの連携設定などを行うことで、画像のWebP変換配信が利用できるようになります。
手順6:これでセットアップは完了です。お疲れ様でした！
まとめ
ImageKitを使えば、AWS S3やSupabase Storageなど既存のストレージと組み合わせるだけで、画像を自動的にWebP形式へ変換しながらCDN配信できます。ブログ記事のように画像枚数の多いページでも、1枚ずつ手動変換する手間がなくなり、表示の高速化と運用負荷の削減を同時に実現できます。
無料枠が月20GBと大きいため、まずは個人プロジェクトで試してみるのもおすすめです。
サービス情報
- 公式サイト: https://imagekit.io/
- 無料プラン: 月20GBまで利用可能
- 主な用途: 画像のフォーマット変換・CDN配信
