Culture Kings 每月在產品清單頁面、內部應用程式及其網站的其他部分平均呈現 500 萬張圖像。借助 imgix 的渲染 API、圖像 CDN 和開發人員友好的 SDK，Culture Kings 大大提高了其視覺媒體性能並填補了 Shopify 的功能空白。
客戶
Culture Kings是一家將音樂、運動和時尚融為一體的領先街頭服飾零售商。 Culture Kings 成立於 2008 年，擁有忠實的粉絲群和無數名人，以滿足他們的街頭服飾和配件需求。 Culture Kings 擁有 7 個澳洲店面、1 個紐西蘭店面以及一家蓬勃發展的全球電子商務商店。他們擁有 200 多個品牌，每週發布 500 多種新產品。
透過電子商務傳達
挑戰
Culture Kings 的電子商務商店建立在無頭電子商務平台Shopify Plus上。 Shopify 的影像優化功能有限，無法提供 Culture Kings 所尋求的必要功能。該平台不支援 WebP、裁剪、調整大小或將 GIF 轉換為WebP或 MP4 影片。
此外，Culture Kings 提供多種款式和配色的產品，創意團隊需要以引人注目的方式向顧客展示產品系列。有些物品根據光線的不同看起來也有很大不同，具有紫外線反應和夜光功能。向線上購物者準確展示這些產品需要許多高品質的視覺效果。
Culture Kings 創意團隊使用 GIF 以動態影像展示產品和系列。然而，這些GIF經常超過5MB，導致Culture Kings因優化不佳而面臨Core Web Vitals處罰。他們還需要一種將影像快速傳送到多個全球店面和內部系統的方法。
The company also needed a solution to improve its internal product fulfillment systems, as well as its public-facing website. When new products come into the warehouse, the photography team produces new images and loads the files into the product management system, which gives warehouse workers visually intuitive packing instructions. These internal systems run on desktop and portable devices with limited power and bandwidth, so the images needed to be optimized with smaller file sizes to load quickly and display correctly.
The Solution
Culture Kings initially used imgix for their internal web applications before expanding it to their e-commerce store and website to fill in the feature gaps left by Shopify. The imgix Rendering API was used across product description pages, image galleries, and the internal application.
Culture Kings explored other image optimization solutions for their storefronts, including those catering specifically to Shopify customers. However, their long-existing relationship with imgix and the developer-friendliness of the platform made them decide to continue with the same image optimization platform.
"imgix was the most developer-friendly, in my opinion. Their documentation offers clarity as to why things work the way they should and what you can achieve through the imgix platform. It gives examples of different use cases and provides APIs for more complicated functionality if we ever want to add it. I value the developer experience a lot."
- Steve Jiang, Lead E-Commerce Developer
Because Culture Kings used PHP for building their internal applications, they used imgix’s PHP library to add image processing to this software easily.
Some of the imgix parameters that Culture Kings used across their internal applications and e-commerce pages include:
- fm=mp4 converts GIFs to videos, allowing Culture Kings to optimize the dynamic images they use on their homepage and product listing pages. They also used GIF to WebP frequently for lossless compression.
- fit=crop crops and resizes images to fit the requirements of each channel.
- dpr adjusts the digital pixel ratio. Since most of Culture Kings’ traffic comes from mobile devices, the dpr parameter serves images at the correct density for each device.
The Results
The most significant benefit that imgix delivers to Culture Kings is performance through image compression. The same resolution images have a 30% to 50% smaller image size than those served directly by Shopify. Turning GIFs into videos offers a file size reduction of 25%. It only takes 13 milliseconds for images to display on each page.
Culture Kings now uses imgix for 90% of their images and saves significant engineering time by uniting their code base under one image CDN provider.
「當您擁有一個可以裁剪和調整大小的圖像CDN 提供者時，事情會變得更容易。程式碼庫可以在應用程式之間共用。您不必對URL 進行不同的裁剪或格式化；您只需重複使用一個函數即可為您的每張圖像執行此操作。
- Steve Jiang，首席電子商務開發人員