Play Sports Network 是全球最大的騎行媒體公司和社區,每天透過多個管道發布原創騎行內容。透過 imgix 的全球 CDN 和渲染 API,Play Sports Network 能夠大規模實現響應式設計、提高電子商務效能並節省大量設計時間。
客戶
Play Sports Network是全球領先的自行車愛好者和騎手社區,擁有超過 400 萬訂閱者、800 萬社交媒體追隨者和 4500 萬月瀏覽量。他們透過多個管道發布原創內容,包括新聞網站、電子商務商店和行動應用程式。 Play Sports Network 與參加過最高水準比賽的前職業自行車運動員合作,創作真實可信的內容。
Play Sports Network 的多通路方法使他們能夠隨時隨地以追隨者消費內容的方式提供內容。 20% 的存取來自計算機,80% 來自智慧型手機。他們的圖像內容每月使用 20 TB 的 CDN 頻寬,用於來自 16 萬個原始圖像庫的 1.57 億次請求和 90 萬個圖像渲染。
挑戰
Play Sports Network 必須考慮多個管道的圖像需求,這些管道的要求各不相同。在網站上,使用後端處理解決方案優化圖像需要花費大量時間。除了內部製作的內容外,大量用戶生成內容 (UGC) 還透過他們的行動應用程式發布。 UGC 有多種大小和格式,很難使用其後端處理解決方案進行標準化。
「匹配用戶的裝置和螢幕密度是一個很好的做法。但我們不能發瘋,特別是對於行動用戶。我們不想使用太多的行動數據或花費 10 秒來加載圖像它在最佳品質和優化速度和頻寬方面的用戶體驗之間取得了正確的平衡。
- 大衛泰勒,工程主管
Play Sports Network 的頻道也有不同的技術堆疊,因此他們使用的任何影像優化解決方案都必須是可自訂的且易於整合。由於 Play Sports Network 的覆蓋範圍遍及全球,因此需要一個包含快速且可靠的 CDN 的解決方案。
解決方案
Play Sports Network 首先在他們的網站上實現了 imgix,後來將其引入到他們的行動應用程式中。該團隊使用 React、Gatsby 和 Contentful 建立靜態網站,使用 Swift 建立 iOS 應用程序,並使用 Kotlin 建立 Android 應用程式。最後,Magneto 用於電子商務,GCP 用於影像儲存。
imgix 渲染 API可以輕鬆地與這些環境整合。只需點擊幾下即可設定 imgix 並提供圖像。設定非常簡單,並且為電子商務、開發和內容團隊提供了影像優化存取權限。這意味著團隊可以避免與未優化的圖像相關的頁面速度慢、網站效能差以及行動訪客的高數據使用率。
當用戶在行動應用程式上傳用戶生成的圖像時,圖像會進入 GCP 儲存桶,由 imgix 即時處理,並幾乎立即交付。
Play Sports Network 使用自動 srcset 產生和廣泛的渲染參數,包括:
- q設定壓縮的品質等級。
- Play Sports Network 大量使用txt參數來建立編輯資產。內容團隊使用txt-font設定文字字體和樣式,選擇字體大小
- fp-x、fp-y和fp-z設定影像內的焦點。
- Blend是一個多功能參數,可讓 Play Sports Network 使用不同的混合模式在基本影像上合成顏色、文字和影像。
- mark-scale、mark-pad、mark-align和mark-fit提供水印的精細控制。
結果
借助 imgix,Play Sports Network 顯著減少了靜態後端影像處理帶來的儲存和維護負擔。該團隊現在每月可以輕鬆處理超過 1.5 億個圖像請求。
透過適當優化影像,可以提高效能和轉換率。最後,Play Sports Network 節省了大量的工程和設計時間,幫助其迅速成為世界上成長最快的自行車網路之一。




