How Nykaa Simplified Image Management And Optimization For Their Website And Apps
Nykaa has been one of the fastest-growing e-commerce stores, catering to cosmetics and beauty products. Founded in 2012, the brand has emerged as one of the industry's most prominent players in less than a decade. A few key highlights:
The problems
Nykaa sells 300K+ curated products from more than 1500 different brands. A single product has around five images, which are to be displayed across tons of different devices on the web & mobile app. This means more than 10 million unique images for 50 million page views** every month.
It became impossible for their in-house graphics team to resize and optimize each image manually at this scale. This problem led to the search for a scalable solution.
Their technology team had a few objectives in mind:
- They wanted to streamline the whole image resizing workflow. The manual work was wasting the creative team's valuable time—the time which could have been used to support other ongoing marketing activities.
- Improving the Google PageSpeed score was one of the aims. It was possible by optimizing images and using the next-gen image format, as suggested in the recommendations.
- They wanted to have full control over the original assets. 10 million-plus images were stored across different object storages and servers. And moving these images to a third party was not a lucrative option for them.
- They were in a long term contract with CDN vendor and wanted a product that could integrate with their CDN & backend infrastructure.
- During festive season and sales campaigns, it was not unusual for website traffic to spike up to 40%. They needed a solution that could handle these sudden traffic spikes without a glitch.
- They didn't want to build an in-house solution to save development costs and avoid ongoing maintenance overhead.
They wanted to focus on running the business smoothly while a third-party solution could manage all of the above.
ImageKit.io was a perfect fit!
We were a young startup when Nykaa was considering to use ImageKit.io. Not so surprisingly, uptime was one of their biggest concern. We were confident but had no proof back then, unlike now. To minimize the risk, we worked together with their team and decided to roll out the integration in phases. Everything worked perfectly as expected.
Let's talk about how they solved each challenge in more details:
Simpler image workflow
The old image workflow involved a lot of mundane image resizing and optimization. With ImageKit.io's real-time resizing of images using parameters, all they needed was a hi-res product image. That's it! So the new image workflow became much more straightforward:
- The creative team uploads a hi-res product image in the internal CMS.
- Developers use ImageKit.io URL-parameters to resize images as per the layout of different sections on the website and app.
Real-time resizing was quite easy to implement. Just by adding tr=w-360 in the images URL for the listing page, all images were resized to 360px width.
https://images-static.nykaa.com/uploads/e1362e70-1d7f-403d-8975-b554b65f59cd.jpg?tr=w-360? By applying these parameters in a few template files, millions of existing images were now being delivered in the exact dimension as needed by the client-side device. And if they needed a new variant for a particular section, all that developers had to do was change the parameter value.
ImageKit allows us to deliver optimized images across web and mobile with minimal effort. We don't have to think much about compressing the images to the right level or delivering it in the right format. And it has made life simpler for our developers.
Improved PageSpeed score
Delivering resizing images is not enough when it comes to image optimization. Google PageSpeed insight reports recommend using next-gen image formats (WebP).
ImageKit.io automatically delivers the images in the right format based on device support, image content, and account settings. This means that now all images were not only being appropriately resized, but they were being delivered in the right format. This lead to an increase in PageSpeed score and perceived performance.
For example, this image from Nykaa's site is around 110 KB, while this one optimized with ImageKit is only 42KB. When resized for mobile devices, and the file size becomes only 17.7KB.
? Overall, this translated to over 84% reduction in image size with zero compromises in perceived image quality. This resulted in an incredible visual experience.
Integration with custom CDN
Nykaa was in a long term contract with their CDN vendor and wanted to use ImageKit.io in backend for real-time resizing and optimization.
By default, ImageKit.io offers a global CDN (Amazon CloudFront) but can be integrated with popular CDN providers.
Our team took care of end-end changes in external CDN configuration and made sure that everything was working as expected.
Control over original assets
Ten million plus images were stored across different object storages and servers. And moving these images to a single storage or third party was not the right choice.
ImageKit.io's secure integration with external storage (e.g., Amazon S3 and web server) allowed their team to attach these external storage within a few minutes. Now they could use the power of real-time resizing and automatic optimization on these millions of existing image URLs.
? Their team was working on a progressive web app (PWA). This effortless integration accelerated development and reduced the time to market for them.
Technical expertise and on-time support
Our team provided on-time support and technical expertise to make sure that no aspect is overlooked. We made sure that every parameter and account setting was optimum for their use-case.
ImageKit team has been really helpful with their support or even if we have some doubts. Their team is just a call away and they are able to explain things very well and resolve all our queries in just a few hours.
Summary
- Their team saved a lot of time by leveraging real-time image resizing and automatic optimization.
- PageSpeed score improved as images were being served in the appropriate dimension and format.
- Seamless integration with existing CDN and storage reduced time to market for their progressive web app.
- All the original assets are owned and controlled by Nykaa. And ImageKit.io integrated with their existing tech stack.
If you are facing similar challenges and want to know if ImageKit.io can help, reach out to us at sales@imagekit.io or try yourself by creating a free account.
** Website traffic data taken from SimilarWeb as of Nov 2019.