imgix uses cookies to maintain user sessions and track marketing efforts. By continuing to use our website, you agree to our use of cookies for these purposes. Read our Privacy Policy.

Play Sports Network Case Study

Play Sports Network uses imgix to serve 157 million image requests per month, improve web performance, and save time.

Play Sports Network, the world's largest cycling media company and community, publishes original cycling content across multiple channels daily. With imgix's global CDN and Rendering API, Play Sports Network was able to achieve responsive design at scale, improve e-commerce performance, and save significant design time.

157m

Image Requests Per Month

900k

Image Renders Per Month

160k

Original Images Processed

The Customer

Play Sports Network is the world's leading community of cycling fans and riders, with more than 4 million subscribers, 8 million social media followers, and 45 million monthly views. They publish original content across multiple channels, including news sites, an e-commerce store, and mobile apps. Play Sports Network works with former professional cyclists who have competed at the highest levels to create authentic and credible content.

Play Sports Network's multi-channel approach allows them to deliver content wherever and however their followers consume content. While 20% of their visits come from computers, 80% are from smartphones. Their image content uses 20 TB of CDN bandwidth monthly, for 157 million requests and 900k image renders, from a library of 160k Origin Images.

website image
Global Cycling Network: social media image

The Challenge:
Optimize Images at Scale

Play Sports Network had to consider the image needs of multiple channels, which had varying requirements. On the websites, images were optimized using a backend processing solution which took significant time. In addition to the content produced in-house, a large volume of user-generated content (UGC) is posted through their mobile app. UGC comes in many sizes and formats, which are difficult to standardize using their backend processing solution.

play sports network e-commerce product images
Global Cycling Network: e-commerce product images

It’s just a good practice to match the user’s device and screen density. But we can’t go crazy, particularly for mobile users. We don’t want to be using too much of their mobile data or taking 10 seconds to load an image. It’s getting that balance right between the best quality and optimizing the user experience in terms of speed and bandwidth.

— David Taylor, Head of Engineering

Play Sports Network also has different technology stacks for its channels, so any image optimization solution they use must be customizable and easy to integrate. And because of their global reach, Play Sports Network needed a solution that included a fast and reliable CDN.

The Solution

Play Sports Network first implemented imgix on their websites and later brought it to their mobile applications. The team uses React, Gatsby, and Contentful for static websites, Swift for the iOS app, and Kotlin for the Android app. Finally, Magneto is used for e-commerce and GCP for image storage.

The imgix Rendering API integrated with each of these environments easily. It only took a few clicks to set up imgix and to serve images. Setup was easy and opened up image optimization access to the e-commerce, development, and content teams. This meant the team could avoid the slow page speeds, poor website performance, and high data usage for mobile visitors that are all associated with unoptimized images.

When users upload user-generated images on the mobile app, it goes to a GCP bucket, processed on-the-fly by imgix, and is delivered almost instantly.

mobile image
Global Cycling Network: user-generated image

Play Sports Network uses automatic srcset generation and a broad range of Rendering parameters, including:

  • q sets the quality level for compression.
  • txt parameters are used heavily by Play Sports Network to create editorial assets. The content team sets the text typeface and style with txt-font, selects a font size with
  • fp-x, fp-y, and fp-z sets focal points within the images.
  • blend is a versatile parameter that allows Play Sports Network to composite color, text, and images over a base image using different blend modes.
  • mark-scale, mark-pad, mark-align, and mark-fit offer granular control over watermarks.

website carousel
Global Cycling Network: product image gallery

Results

With imgix, Play Sports Network significantly reduced the storage and maintenance burden that comes with static backend image processing. The team can now easily handle over 150 million image requests per month.

Performance and conversion rates improved through properly optimized images. Finally, Play Sports Network saved significant engineering and design time, helping it sprint forward as one of the fastest-growing cycling networks in the world.

play sports network plus imgix

imgix is a real-time image processing service and CDN. Thousands of companies around the world use imgix to deliver the best images at the perfect sizes to their customers.