グローバルなストリートウェア小売企業のCulture Kingsは、Imgixの導入により画像ファイルサイズを40%削減し、エンジニアリング工数も大幅に節約しました。
お客様について
Culture Kingsは、商品一覧ページや社内アプリケーションをはじめとするサイト各所で、毎月平均500万枚の画像をレンダリングしています。ImgixのレンダリングAPI、画像CDN、開発者にやさしいSDKを活用することで、Culture Kingsはビジュアルメディアのパフォーマンスを大幅に向上させ、Shopifyの機能面の不足を補いました。
Culture Kingsは、音楽、スポーツ、ファッションをつなぐストリートウェアの大手小売企業です。2008年の創業以来、熱心なファンや数多くのセレブリティが、ストリートウェアのアパレルやアクセサリーを求めてCulture Kingsを訪れています。オーストラリアに7店舗、ニュージーランドに1店舗を構えるほか、グローバルに展開するeコマースストアも好調です。取り扱いブランドは200以上にのぼり、毎週500点以上の新商品がリリースされています。
目まぐるしいペースで新商品をリリースしながら、eコマースで独自のスタイルを伝えるには、効果的な画像処理ソリューションが欠かせません。Culture Kingsは100万点を超えるオリジナル画像を抱え、毎月9億4,900万件のCDNリクエストを処理し、24 TBのCDN帯域を使用しています。トラフィックの80%をスマートフォンが占めるため、モバイル中心のユーザーに最適化する必要がありました。
課題
Culture Kingsのeコマースストアは、ヘッドレスコマースプラットフォームであるShopify Plus上に構築されています。しかし、Shopifyの画像最適化機能は限定的で、Culture Kingsが必要とする機能を提供できませんでした。WebPへの対応、トリミング、リサイズに加え、GIFからWebPやMP4動画への変換にも対応していなかったのです。
さらに、Culture Kingsは複数のスタイルやカラーウェイを持つ商品を数多く扱っており、クリエイティブチームにはコレクションを目を引く形でお客様に見せる方法が必要でした。UVに反応する素材や蓄光素材を使ったアイテムもあり、照明によって見た目が大きく変わります。こうした商品をオンラインで正確に見せるには、高品質なビジュアルが数多く必要です。
Culture Kingsのクリエイティブチームは、GIFを使って商品やコレクションを動きのある画像で紹介していました。しかし、これらのGIFは5 MBを超えることも多く、最適化が不十分だったため、Core Web Vitalsの評価低下を招いていました。また、世界各地のストアや社内システムに画像をすばやく配信する方法も必要でした。
同社は、一般向けのウェブサイトだけでなく、社内の商品フルフィルメントシステムを改善するソリューションも求めていました。新商品が倉庫に届くと、撮影チームが新しい画像を撮影して商品管理システムに登録し、倉庫スタッフはその画像をもとに直感的に梱包作業を進めます。これらの社内システムは、処理能力や帯域に制約のあるデスクトップ端末や携帯端末で動作するため、画像をすばやく読み込んで正しく表示できるよう、ファイルサイズを小さく最適化する必要がありました。
解決策
Culture Kingsは当初、社内のウェブアプリケーションでImgixを利用していましたが、その後、Shopifyの機能面の不足を補うため、eコマースストアやウェブサイトへと利用を広げました。ImgixレンダリングAPIは、商品説明ページ、画像ギャラリー、社内アプリケーションで使用されています。
Culture Kingsは、Shopifyユーザー向けのものを含め、ストアフロント用の他の画像最適化ソリューションも検討しました。しかし、Imgixとの長年の関係と、プラットフォームの開発者へのやさしさが決め手となり、引き続きImgixを使うことに決めました。
「私の考えでは、Imgixが最も開発者にやさしいサービスでした。ドキュメントを読めば、なぜそのように動作するのか、Imgixのプラットフォームで何が実現できるのかがよくわかります。さまざまなユースケースの例が示されているうえ、将来より複雑な機能を追加したくなったときのためのAPIも用意されています。私は開発者体験をとても重視しています」と、リードeコマース開発者のスティーブ・ジャン氏は語ります。
- fm=mp4：GIFを動画に変換し、Culture Kingsがホームページや商品一覧ページで使う動きのある画像を最適化します。また、GIFからWebPへの変換も、ロスレス圧縮のために頻繁に活用しています。
- fit=crop：各チャネルの要件に合わせて画像をトリミングし、リサイズします。
- dpr：デバイスピクセル比（DPR）を調整します。Culture Kingsのトラフィックの大半はモバイル端末からのため、dprパラメータで端末ごとに適切な密度の画像を配信しています。
- s：URLの不正な改ざんをブロックし、画像のセキュリティを強化します。
結果
ImgixがCulture Kingsにもたらした最大のメリットは、画像圧縮によるパフォーマンスの向上です。同じ解像度でも、Shopifyから直接配信する場合に比べて画像サイズが30%〜50%小さくなりました。GIFを動画に変換することで、ファイルサイズは25%削減されています。各ページで画像が表示されるまでの時間は、わずか13ミリ秒です。
現在、Culture Kingsは画像の90%をImgixで処理しており、コードベースを1つの画像CDNプロバイダーに統一したことで、エンジニアリング工数を大幅に節約しています。
「トリミングもリサイズもできる画像CDNプロバイダーが1つにまとまっていると、とても楽です。コードベースをアプリケーション間で共有できます。URLごとにトリミングやフォーマットの指定を変える必要はなく、表示したいすべての画像に1つの関数を使い回すだけで済みます。」
（スティーブ・ジャン様、Culture Kings リードeコマース開発者）
