Purplle.com reduced their image sizes and improved web performance by 60%
Purplle.com is one of India's leading online beauty products company which offers a wide range of grooming and beauty products for both men and women across its website and mobile app. One of the more innovative companies in this field, Purplle also personalizes the user experience based on the user's preferences, requirements, and gender. It now uses ImageKit for image optimization on its websites and apps to improve performance, UX and saves on bandwidth costs.
ImageKit has made real-time image manipulation, optimization and resizing across devices really easy. Its an out of the box plug & play offering with minimal changes in existing infrastructure. And Yes, Your images stay where they are!.
The challenge
Like any typical e-commerce company, Purplle.com displays millions of images on its website and app every day. Add to that, a large number of product images are added every day.
Given the large number of images that are to be displayed on a single page, images are the single biggest contributor to the page load size.
The need was to optimize all images available with Purplle, be it marketing banners or product images, for different devices, in a way that does not disrupt the existing architecture of Purplle.com. And understandably so, as it is not easy to move some million+ images to a different platform for optimization.
The solution
ImageKit’s optimization in a few minutes
ImageKit was built with exactly this idea in mind — real-time image optimization and resizing across devices with minimal changes in the company’s existing infrastructure.
AWS S3 buckets are used to store the images on Purplle.com. ImageKit provides direct integration with AWS S3.
The team at Purplle simply attached their bucket to their ImageKit account, and that’s it! All that was needed to be done was a change in the hostname in the image URLs. A mere replacement of AWS S3’s hostname with ImageKit’s hostname was all it took.
Thereafter, ImageKit would internally get the image from the bucket when requested, and deliver the optimized image in real-time.
To make it even simpler, ImageKit developed the custom CNAME feature while onboarding Purplle. This essentially meant Purplle could use their existing domain name with ImageKit. All they needed to do was a DNS change to point the existing image hostname to ImageKit.
With this done, ImageKit automatically checks the user’s device, browser, image content, and image format to determine the output image size, format, and quality. The URL remains exactly the same across platforms. It is ImageKit that intelligently delivers and stores the appropriate optimized image based on the above factors.
So Purplle.com now gets optimized images, without changing their infrastructure at all, with just a small DNS change in their network configuration.
As a matter of fact, it took just 15 minutes for Purplle.com to test ImageKit’s integration and go live with it on their website.
Real-time resizing with ImageKit
The other part that Purplle wanted to address was the correct resizing of images on their website. Correctly sizing the images for different devices and different placeholders can save a lot of KBs. Multiply this for more than a million images and you end up saving several GBs of bandwidth.
For image resizing, Purplle used ImageKit’s real-time image transformations. This allowed them to create different image sizes by specifying the required dimensions and cropping strategy in the URL.
This step simplified the workflow around images at Purplle. Only one large image of a product is uploaded in their S3 storage. Beyond that, ImageKit is used to generate all the different sizes required on their website and app.
Additionally, since ImageKit does not charge for unique image transformations, the tech team was free to create as many perfectly-sized images as required by their website or app’s interface.
The results
ImageKit’s automatic image optimization and transformations have helped Purplle.com cut down their bandwidth consumption by about 60%.
This resulted in huge savings on bandwidth costs and storage costs, and also simplified the workflow around images. This led to a significantly improved user experience for their customers. It has also made it simpler for their content and technology teams to curate and manage images across devices.