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