Culture Kings renders on average 5 million images monthly on product listing pages, internal applications, and other parts of their website. With imgix’s Rendering API, image CDN, and developer-friendly SDKs, Culture Kings drastically improved its visual media performance and filled Shopify’s feature gaps.
The Customer
Culture Kings is a leading streetwear retailer connecting music, sport, and fashion. Founded in 2008, a loyal fanbase and countless celebrities turn to Culture Kings for their streetwear apparel and accessory needs. Culture Kings has seven Australian storefronts, one New Zealand storefront, and a thriving global e-commerce store. They feature over 200 brands that release 500-plus new products weekly.
Conveying a unique sense of style via e-commerce while keeping up with the breakneck product launch schedule requires an effective image processing solution. Culture Kings has over 1 million original images, 949 million CDN requests, and uses 24 TB of CDN bandwidth monthly. Smartphone devices comprise 80% of the traffic, so they needed to cater to a primarily mobile audience.
The Challenge
Culture Kings’ e-commerce store is built on Shopify Plus, a headless e-commerce platform. Shopify’s image optimization capabilities were limited and unable to deliver the necessary capabilities Culture Kings was looking for. The platform did not support WebP, cropping, resizing, or converting GIFs to WebP or MP4 videos.
In addition, Culture Kings offers many products with multiple styles and colorways, and the creative team needed a way to show off the collections to customers in an eye-catching way. Some items also look drastically different depending on the lighting, with UV-reactive and glow-in-the-dark features. Accurately displaying these products for online shoppers requires many high-quality visuals.
The Culture Kings creative team used GIFs to feature products and collections in dynamic images. However, these GIFs frequently exceeded 5MB, leading Culture Kings to face Core Web Vitals penalties due to poor optimization. They also needed a way to deliver images quickly to multiple global storefronts and internal systems.
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.
"It’s easier when you have one image CDN provider that can crop and resize. The codebase is shareable between applications. You don’t have to do different cropping or formatting of the URLs; you just reuse one function to do it for every image you want to show."
- Steve Jiang, Lead E-Commerce Developer
