In an effort to replace its legacy infrastructure and upgrade its web performance, ExpressVPN chose imgix as the image optimization and delivery solution. Not only does imgix improve the visual media performance, it also integrates seamlessly with the new tech stack, saves Engineering time, and enhances the Marketing team’s content management workflow.
The Customer
ExpressVPN is one of the world’s largest VPN service providers, available on desktop, mobile, smart TVs, gaming consoles, and smart home devices. They serve individual users and corporate accounts across multiple countries.
With VPN use seeing explosive growth, the market is, of course, becoming extremely competitive. Because websites are a leading customer acquisition channel, ExpressVPN found that it’s crucial for the sites to load fast and deliver the best user experience, on desktop or mobile, in 10 languages worldwide.
The Challenge
Early on, ExpressVPN used Akamai as their content distribution network (CDN) for both image and non-image assets. Images were too heavy and slow to load. The engineering team investigated Akamai's image optimization solution but found several challenges:
1. It doesn’t optimize images beyond basic compression.
2. It was difficult to set up.
3. Working within Akamai was sometimes challenging as the team didn't receive the needed support.
The team also used Ruby on Rails, which became hard to scale and optimize over time. Each page needed to be hard-coded within the Ruby on Rails framework. Multiple versions of the same images had to be created to create a device-responsive user experience.
The Solution
When ExpressVPN decided to revamp its infrastructure, the team recognized that image optimization and delivery would be key requirements moving forward.
The team evaluated both imgix and competitors. They found that imgix was a more robust solution with a more user-friendly interface. Moreover, the pricing plans offered by competitors were expensive, complicated, and not comprehensive, especially compared to imgix, which offered streamlined pricing, including bandwidth in its plans.
Ultimately ExpressVPN chose imgix. The team takes full advantage of the automatic srcset generation feature to adjust the image size based on the target device and the imgix Rendering API for additional transformations. Some of the key URL query parameters used are:
- dpr sets the quality level for compression
- fit directs how the image should fit the target dimension
- cs specifies the color space setting
- 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
