Cloudinary Blog

Stylight Fashions Image-Heavy Retail Search Engine with Cloudinary

Stylight Fashions Image-Heavy Retail Search Engine with Cloudinary

Solution

For Stylight, a fashion and design retail search engine, uptime, performance and customer experience are key to the bottom line. With tens of thousands of new images being added to its site each week, and a very small development team, the company needed an efficient way to manage and manipulate images, so they could be viewed quickly and optimally on any device used by consumers in 16 countries. As one of the earliest users of Cloudinary, Stylight sees significant performance and financial benefits related to Cloudinary’s cutting-edge solution for image optimization and delivery on multiple content delivery networks (CDNs).

Results

  • Add new stores with tens of thousands of products in under two hours
  • Improved conversion rate by up to 2.2 percent
  • Grew revenue per visit by up to 2.4 percent

Company

Stylight, the leading aggregation platform for users and the fashion & lifestyle industry worldwide, helps online shoppers search more than 1,000 online shops featuring the best brands and retailers, compare prices of more than 30 million products and find all the best deals. Once users find the products they want, Stylight redirects them to the retailers’ websites to complete their purchases.

The Challenge: Small Team Managing Millions of Images

In the early years, Stylight had a really small team developing the fashion search engine. They had quite a task in front of them, working with thousands of product images provided by multiple online shops and retailers, and making sure they all looked great and loaded quickly, so visitors were delighted with great image quality and great load time.

“With limited manpower we still wanted to move fast. Managing images and transformations including optimizations for all kinds of devices and viewports was a challenge for our new responsive website,” said Matthias Hoyer, Head of Product at Stylight. “We needed an easy way to optimize images and display them appropriately for our users.”

After considering on-premises options, which would require the company to host and store its own images, the Stylight team decided to look for cloud solutions and discovered Cloudinary.

“Cloudinary provided everything we were looking for – multiple image resolutions, scaling, quality optimization, and more,” he added, and so Stylight became one of Cloudinary’s first customers.

The Cloudinary Solution: Streamlining Image Management and Improving Store Uptime

Stylight uses a microservices based architecture, so it has a variety of teams that work hand-in-hand to integrate new shops with the site, add product information on the fly, etc. The team that enriches the products by tagging them to appear in the appropriate categories also is responsible for uploading the images into Cloudinary. The Product team which is responsible for the client facing parts of Stylight consumes a REST API including the Cloudinary image IDs and applies certain transformations via Cloudinary’s unique URL-based solution to ensure those images appear as intended on the site.

One of the most important features of Cloudinary for Stylight relates to automation. Using automatic format selection and automatic quality compression, Stylight’s team is able to easily deliver the best image format, such as WebP for Chrome browsers, and optimal image quality based on viewport, bandwidth and other unique factors. The optimized size and format has “a significant positive impact on page load time, performance and visitor satisfaction," Hoyer noted.

“Cloudinary has been easy to use since the start. For my development team, being able to transform images on-the-fly has been the key to managing so many images. If we had to do everything by hand, it would be impossible. There is no way we could have achieved what we’re doing with Stylight without automating the image management and transformation process through Cloudinary.” –Matthias Hoyer, Head of Product at Stylight

Another Cloudinary feature that is vital to Stylight is lazy loading. “We use a lazy loading JavaScript plug-in, so on the server side we can determine what kind of device – mobile, tablet or desktop – is being used to access our search engine,” Hoyer added. “Then we include the images that will be directly visible in the viewport with the correct image tags. All other images will be lazy loaded once the user interacts with that part of the site.”

More recently, Stylight began leveraging Cloudinary’s multi-CDN capabilities, which dynamically switches between multiple content delivery networks – Akamai, Fastly and Amazon CloudFront. Leveraging multiple CDNs plays a critical role in ensuring optimal performance – serving images closer to Stylight’s end users to speed page load time. In addition, being able to switch between CDNs when needed prevents costly downtime of Stylight’s site.

The Results: Improved Revenue Per Visit and Conversion Rates

Stylight implemented Cloudinary as a key component of its search engine through which consumers in 16 different countries can shop online. Stylight features millions of products on its website, so when a new shop goes online, there could be 50,000 or more new products coming into the system that must be added to and displayed on the Stylight site.

“Without Cloudinary, we could not do this efficiently, since we only have five developers who are responsible for scaling all the images and ensuring they display correctly on the site,” Hoyer said, noting that the company reduced the time it takes to go live with a new store in under two hours.

But efficiency of the team isn’t the only benefit of using Cloudinary. Stylight has seen impressive results in performance in the countries it serves. Lazy loading has sped up page load time by about 100 milliseconds across all locations, enhancing the user experience.

A better user experience has improved the click out conversion rate (COCR) anywhere from .4% to 2.2%, depending on the country. COCR is a measure of the number of clicks on products and redirects to partner stores during a given session, and has a direct impact on Stylight’s revenue, since it is tied to the compensation they receive from their partner stores. In addition, Stylight has seen its revenue per visit grow between .5% and 2.4% in various countries.

Many of these results can be traced back to leveraging new technologies to optimize performance. “Cloudinary is at the forefront of adopting cutting-edge technologies, and quickly implements them into their solution. We don’t have to invest in learning more about new technologies or implementing them ourselves, since we know Cloudinary will do it,” Hoyer noted.

“Cloudinary has enabled us to move fast with an effortless and cost-effective solution for managing, hosting and serving images,” Hoyer concluded. “Stylight handles so many new images each week that we would need a significantly larger staff to manage them, as well as a separate team for hosting the images across 16 countries.”

Recent Blog Posts

An Eye-Opening Talk: Building Apps for the Next Billion Users in Africa

William (iChuloo) Imoh, who hails from Lagos, Nigeria, recently embarked on a U.S. speaking tour, February 20-March 12, during which he powwowed with technical and product teams and communities at such renowned enterprises as Netlify, Pluralsight, Lucidchart, Twilio, and more in Salt Lake City, Dallas, Las Vegas, and San Francisco. On March 5, he gave an enlightening talk, entitled International Developers and Development: Building for the Next Billion Users at Cloudinary in Santa Clara, California. Below is a synopsis. For details, see the related slides.

Read more
The Debut of the Cloudinary Customer Advisory Board

Focus on customers has always been Cloudinary’s mantra. Because we owe them our success, we are constantly reaching out to our customers, not just for feedback on our offerings, but also for their vision, wish list, and buy-in of what Cloudinary can do to meet their needs and make them succeed. About six months ago, it occurred to us that it would be beneficial if we could meet regularly with those who are behind innovation at our key customers—executives, product gurus, developers, content managers—to swap strategies, product roadmaps, best practices, and such. In particular, we’d like to solicit actionable feedback as a foundation for our plans of product enhancements.

Read more
Media Management With the Cloudinary-Netlify CMS Integration

Static sites and the JAMstack are quickly becoming a standard for developing safe and performant websites with an optimal workflow for developers. Netlify CMS (not to be confused with the company that created it, Netlify) is an open source content management solution that works especially with static site generators such as Gatsby, Hugo, etc... enabling content storage in your Git repository along with your code for easier versioning, multichannel publishing, and direct content updates in Git.

Read more
Vitaly Friedman's Insights on Media Conferences

Vitaly Friedman is a die-hard devotee of beautiful content. Born in Minsk, Belarus, he studied Computer Science and Mathematics in Germany, unearthing in himself a passion for typography, writing, and design in the interim. After a six-year stint as a freelance designer and developer, he co-founded Smashing Magazine, a leading online publication on web design and development. You can follow SmashingMag on Twitter @SmashingMag.

Read more