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.

‍

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.

"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.

‍

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.

‍

‍

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.

‍

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.

‍