The problem statement
Like a 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 that are added every day.
Given a 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 idea was to optimize all the 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, because it is not easy to move million-plus images to a different platform for optimization.
ImageKit’s optimization in 15 minutes
ImageKit was built with exactly the same idea – real-time image optimization and resizing across devices with minimal changes in a 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 just 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. Replace AWS S3’s hostname with ImageKit’s hostname. 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 meant that Purplle could use their existing domain name with ImageKit. All they needed to do was a DNS change to point the existing image host name 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.com 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.com 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 their S3 storage. After 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’s or app’s interface.
The results – 60% reduction in bandwidth, Simpler image workflow
ImageKit’s automatic image optimization and transformations have helped Purplle.com to cut down its bandwidth consumption by about 60%.
This resulted in huge savings on bandwidth costs and storage costs and also simplified the workflow around images. This lead to a significantly improved user experience for their customers. It has also made it simple for their content and technology teams to curate and manage images across devices.