世界的なストリートウェア小売業者であるCulture Kingsは、Imgixを使用して画像ファイルサイズを 40% 削減し、エンジニアリング時間を大幅に節約しました。
顧客
Culture Kingsは、製品一覧ページ、内部アプリケーション、およびWebサイトの他の部分に毎月平均500万枚の画像をレンダリングしています。ImgixのレンダリングAPI、画像CDN、開発者向けの SDK により、Culture Kings はビジュアルメディアのパフォーマンスを大幅に向上させ、Shopify の機能ギャップを埋めました。
カルチャーキングス は、音楽、スポーツ、ファッションをつなぐストリートウェアの大手小売業者です。2008年に設立され、熱心なファンや数え切れないほどのセレブが、ストリートウェアのアパレルやアクセサリーのニーズを求めてカルチャーキングスに目を向けています。Culture Kingsには、オーストラリアに7店舗、ニュージーランドに1店舗、そして活気あるグローバルeコマースストアが1店舗あります。200以上のブランドが毎週500種類以上の新製品をリリースしています。
急な製品発売スケジュールに遅れずについていきながら、電子商取引を通じて独自のスタイルセンスを伝えるには、効果的な画像処理ソリューションが必要です。カルチャーキングスは 100 万点を超えるオリジナル画像、9億4900万件の CDN リクエストを処理しており、毎月 24 TB の CDN 帯域幅を使用しています。スマートフォンデバイスはトラフィックの 80% を占めるため、主にモバイルユーザーに対応する必要がありました。
ザ・チャレンジ
カルチャーキングスのeコマースストアの成り立ち ショピファイプラス、ヘッドレス電子商取引プラットフォーム。Shopifyの画像最適化機能は限られており、Culture Kingsが求めていた必要な機能を提供することができませんでした。このプラットフォームは、WebP、トリミング、サイズ変更、GIF への変換をサポートしていませんでした。 WebP またはMP4ビデオ。
さらに、Culture Kingsは複数のスタイルやカラーウェイの商品を数多く提供しており、クリエイティブチームはコレクションを人目を引く方法で顧客にアピールする方法を必要としていました。また、一部のアイテムは、紫外線に反応し、暗闇で光る機能を備えているため、照明によって見た目が大きく異なります。オンライン買い物客にこれらの商品を正確に表示するには、多くの高品質なビジュアルが必要です。
Culture Kingsのクリエイティブチームは、GIFを使って商品やコレクションをダイナミックな画像で紹介しました。しかし、これらの GIF は 5 MB を超えることが多く、最適化が不十分だったため、カルチャーキングスはコアウェブバイタルズのペナルティに直面していました。また、複数のグローバル店舗や社内システムに画像を迅速に配信する方法も必要でした。
同社では、社内の商品フルフィルメントシステムや一般向けウェブサイトを改善するためのソリューションも必要でした。新製品が倉庫に届くと、写真チームは新しい画像を作成し、そのファイルを製品管理システムにロードします。これにより、倉庫作業員は視覚的に直感的に梱包指示を受けることができます。これらの内部システムは、電力と帯域幅が限られているデスクトップおよびポータブルデバイスで動作するため、画像をすばやく読み込んで正しく表示するには、ファイルサイズを小さくして最適化する必要がありました。
解決策
Culture Kingsは当初、社内のウェブアプリケーションにImgixを使用していましたが、その後、Shopifyが残した機能のギャップを埋めるためにEコマースストアやウェブサイトに拡張しました。は Imgix レンダリング API 商品説明ページ、画像ギャラリー、内部アプリケーションで使用されていました。
Culture Kingsは、Shopifyのお客様専用のものを含め、ストアフロント向けの他の画像最適化ソリューションも検討しました。しかし、Imgixとの長年の関係と、プラットフォームの開発者への親しみやすさから、同じ画像最適化プラットフォームを使い続けることに決めました。
「私の意見では、imgix は最も開発者に優しいものでした。彼らのドキュメントには、なぜ物事が本来あるべきように機能するのか、imgix プラットフォームを通じて何が達成できるのかが明確に示されています。さまざまなユースケースの例を示し、さらに複雑な機能を追加したい場合に備えて API も提供しています。開発者の体験をとても大切にしています。」-Steve Jiang、リード E コマースデベロッパー
- fm=mp4 GIFを動画に変換し、Culture Kingsがホームページや商品リストページで使用するダイナミック画像を最適化できるようにします。彼らはまた使用しました GIF から WebP へ ロスレス圧縮によく使われます。
- フィット=クロップ 各チャンネルの要件に合わせて画像を切り抜き、サイズを変更します。
- dpr デジタルピクセル比を調整します。Culture Kings のトラフィックのほとんどはモバイルデバイスからのものなので、dpr パラメーターはデバイスごとに適切な密度の画像を提供します。
- s URLの不正な改ざんをブロックすることで、Qiita画像のセキュリティを強化します。
結果
imgix が Culture Kings にもたらす最大の利点は、画像圧縮によるパフォーマンスです。同じ解像度の画像でも、Shopifyが直接提供する画像よりも画像サイズが 30% から 50% 小さくなります。GIFを動画に変換すると、ファイルサイズを 25% 削減できます。各ページに画像が表示されるのにかかる時間はわずか 13 ミリ秒です。
Culture Kingsは現在、画像の 90% にimgixを使用しており、コードベースを1つの画像CDNプロバイダーに統合することでエンジニアリング時間を大幅に節約しています。
「切り抜きやサイズ変更ができる画像 CDN プロバイダーが 1 つあれば簡単です。コードベースはアプリケーション間で共有できます。URL の切り抜きや書式を変更する必要はありません。表示したいすべての画像に対して 1 つの関数を再利用するだけで済みます。」
-主任電子商取引開発者、スティーブ・ジャン
