為了取代其遺留基礎設施並升級其網路效能，ExpressVPN 選擇 imgix 作為映像優化和交付解決方案。 imgix 不僅提高了視覺媒體效能，還與新技術堆疊無縫集成，節省了工程時間，並增強了行銷團隊的內容管理工作流程。
客戶
ExpressVPN是全球最大的 VPN 服務供應商之一，可在桌上型電腦、行動裝置、智慧電視、遊戲機和智慧家庭裝置上使用。他們為多個國家的個人用戶和公司帳戶提供服務。
隨著 VPN 使用量呈現爆炸性成長，市場競爭自然變得異常激烈。由於網站是領先的客戶獲取管道，ExpressVPN 發現網站以全球 10 種語言在桌面或行動裝置上快速載入並提供最佳用戶體驗至關重要。
挑戰
在早期，ExpressVPN 使用 Akamai 作為映像和非影像資產的內容傳遞網路 (CDN)。圖片太重且載入速度慢。工程團隊研究了 Akamai 的影像最佳化解決方案，但發現了幾個挑戰：
1. 它不會優化超出基本壓縮範圍的影像。
2、設定困難。
3. 在 Akamai 內部工作有時會充滿挑戰，因為團隊沒有得到所需的支持。
團隊還使用了 Ruby on Rails，但隨著時間的推移，它變得難以擴展和優化。每個頁面都需要在 Ruby on Rails 框架內進行硬編碼。必須建立相同影像的多個版本才能建立裝置響應式使用者體驗。
解決方案
當 ExpressVPN 決定改造其基礎設施時，團隊意識到影像優化和交付將是未來的關鍵要求。
該團隊對 imgix 和競爭對手進行了評估。他們發現 imgix 是一個更強大的解決方案，具有更用戶友好的介面。此外，競爭對手提供的定價計劃昂貴、複雜且不全面，尤其是與提供簡化定價（包括計劃中的頻寬）的 imgix 相比。
最後ExpressVPN選擇了imgix。團隊充分利用自動 srcset 產生功能，根據目標裝置調整影像大小，並利用imgix 渲染 API 進行額外轉換。使用的一些關鍵 URL 查詢參數包括：
- dpr設定壓縮的品質級別
- fit指示影像應如何適合目標尺寸
- cs指定色彩空間設定
- fm converts the image to the desired output format, such as WebP
- q adjusts the output quality for lossy file formats, such as jpg
imgix fits seamlessly into the new tech stack. ExpressVPN now has an infrastructure with all major components integrated, including:
- Contentful as the CMS
- Hugo as the static site generator
- imgix as the platform for image transformation, optimization, and delivery
Finally, with security at the core of its mission, the ExpressVPN team uses the s parameter to secure the image URLs, which prevents the asset sources from being used maliciously.
The Results
With the infrastructure changes and the integration of imgix, ExpressVPN realized meaningful results that influenced various parts of its operations.
"With the infrastructure changes and the integration of imgix, ExpressVPN realized meaningful results that influenced various parts of its operations."
- Ed Bosher, VP of Engineering
By using imgix as the image optimization and delivery solution, ExpressVPN saw a 30% bandwidth saving.
With assistance from the imgix support team, the team "shaved another 10% off page weight" by simply tweaking the DPR parameter. On the ExpressVPN homepage alone, the image size is reduced from roughly 340Kb to about 100Kb - a 70% decrease.
But there was much more to the imgix offering than file size reductions. Competing solutions were hard to work with. But with imgix, implementation was easy, with the team only needing to set up an S3 bucket and connect imgix to it. All in all, they said it took an hour to set up a sandbox in which they could optimize images.
According to the team, imgix works "incredibly well" with Hugo. They can see where in the world their images are going. With over 150 image transformation operations to choose from and deep SDK libraries, imgix is very customizable to meet different needs. For ExpressVPN, the transformations were almost identical for most images on most pages. With the help of imgix sales and customer support, ExpressVPN can implement more customized transformations for different needs.
"The sales team at imgix is a pleasure to work with."
- Ed Bosher, VP of Engineering
Another benefit of partnering with imgix was access to the Asset Manager feature. Asset Manager provides an easy and intuitive UI to visualize, organize, and tag images in the existing storage buckets.
The marketing team at ExpressVPN can independently manage images and conduct A/B tests. This allows ExpressVPN to continually improve the marketing results while keeping marketing and engineering in sync.
"We make up the cost of imgix in bandwidth savings alone, and we get all the benefits of optimization. It doesn't make sense to not use a service like imgix. Engineers should just do it by default."
- Ed Bosher, VP of Engineering