The Customer
Leafly, an online cannabis community and e-commerce platform, connects consumers, brands, and retailers with each other. They have 416 million image requests per month from their educational articles, product listings, and user reviews. Their previous image optimization solution scaled poorly and strained their infrastructure. By using imgix to create a performant srcset, Leafly reduced storage consumption by 90%, improved their website’s speed by 60%, enhanced their SEO efforts, and saved valuable engineering time.
.svg)
Improvement in Page Speed
.svg)
Reduction in Image Storage
.svg)
Image Requests Per Month
A Community and A Marketplace
Leafly helps 125 million people find and buy legal cannabis, educates consumers about cannabis strains, and provides 4,600 retailers and 7,800 brands with specialized e-commerce tools. They process over 4 million orders annually, host 1.3 million user reviews, list 5,000 cannabis strains, and have over 11,000 educational articles.
With this content volume comes a significant image optimization demand. Leafly was founded in 2010 and now has 2.51 million Origin Images. Each month they get 416 million image requests, using 9.60 TB of bandwidth. 75% of this traffic comes from smartphones, while 20% is PC.
The Challenge
Optimizing images at such a large scale, across different devices, created many challenges for Leafly. Detailed product images are the closest approximation to a brick-and-mortar shopping experience. By providing accurate and high-resolution images, consumers know exactly what they’re purchasing, before they get to the dispensary
Leslie Zavisca, VP of Engineering at Leafly, explained. “Consumers research and discover the right cannabis products for them. And performance matters for a fast, seamless user experience on all devices and networks, and for SEO.” Leafly’s industry played a unique role in their image optimization approach.
“Even in fully legal markets, cannabis remains subject to stigma and misinformation. Aside from those barriers, the plant itself is complex and can be intimidating for newbies and ‘cannasseurs’ alike!”
— Leslie Zavisca, VP of Engineering
Leslie continued, “As with beer, wine, and spirits, there are countless strains, processing methods, and product forms, all of which impact the specific benefits and experience for a consumer.” Detailed product images are an important part of building that consumer trust and confidence.
Leafly needed an image processing solution capable of delivering fast, high-quality product and marketing images, but resizing images with their technology stack put an unsustainable resource demand on their cluster. This was critical for helping their customers find the right products for their needs. Their original solution was a custom-built tool, but it scaled poorly. Leafly moved to Thumbor, an open-source solution with a caching CDN. They used Cloudfront alongside this technology, but the latter made cache invalidations difficult. Leafly’s web technology stack included NextJS/React applications, traditional MVC rails applications, and WordPress. Thumbor’s resource consumption varied throughout the day, even with metrics-based auto-scaling. Other services on the shared nodes were impacted, so Leafly had to move it to its own node group. Leafly also had several visual experience issues. Partners could upload any images they wanted of their cannabis products and stores, but these images were often too large or not cropped to web-presentable ratios. The images could also become broken if the file names contained emojis, hashtags, and other special characters, due to the way the system processed them.
The Solution
Leafly searched for a new image optimization solution to reduce infrastructure team stress, while delivering fast, high-quality images. They turned to imgix to handle all images on their website, primarily using S3 buckets to integrate with the platform. “We have many areas around the site that needed solutions for multiple screen sizes. We built a responsive image component based entirely on the tools that Imgix provides. Those tools allow us to properly convert, size, and optimize images on the fly,” said Leslie. Consumers see accurate, high-quality images on every device that they use, allowing them to make informed purchase decisions.” The e-commerce experience becomes the next best thing to seeing these products in-person, when the right images are in place.
These imgix rendering parameters included:
- dpr controlled the Device Pixel Ratio and allowed Leafly to build a performant srcset that ensures every device gets the best image experience.
- s offered a way for Leafly to secure image URLs, preventing unauthorized parties from altering any parameters.
- fm allowed Leafly to choose the most appropriate image format for the request.
- fit controlled the way the output image fits to its target dimensions after resizing and how background areas get filled.
- bg filled in transparent areas on the images with the selected color.
Leafly wrapped imgix in a React component to make it easy for their engineers to use. They also used the Swift and Ruby-on-Rails libraries to further simplify the imgix integration process with their tech stack.
With the srcset attribute, Leafly offers web browsers multiple resolution images to choose from for a responsive user experience. By combining srcset with imgix’s dpr parameter, they can serve high-DPR images to the devices that support them, without wasting bandwidth on sending those images to low-DPR displays. Using imgix for Leafly’s images also provided SEO benefits. The optimized images could load faster, improving Core Web Vitals, while maintaining great image quality. It ultimately resulted in a better user experience. “As part of introducing imgix, we didn’t significantly change our architecture, although it did allow us to deprecate our Cloudfront CDN + Thumbor combination. Our stack is mostly javascript-based. imgix requests our images through S3 buckets, making it easy to separate concerns in our microservices. We have a variety of S3 buckets depending on the image type,” explained Leslie.
The typical image lifecycle for Leafly looks like this, using a store’s location image as an example:
- The store administrator uploads the image using Leafly’s tools, which puts it in an S3 bucket.
- Leafly saves off the imgix URL in their database, which is picked up when visits are made to the site.
- The frontend detects that the image is imgix-based and adds additional rendering parameters to provide the best experience for that image.
The Results
It wasn’t long before Leafly’s website started to see significant performance improvements. Before, their original Speed Index on desktop was around 15 seconds. After implementing imgix, it dropped to 6 seconds on average– a 60% improvement.
“Between Cloudflare and imgix, our requests are aggressively cached to help improve costs, give the users a good experience, and improve SEO.”
— Leslie Zavisca, VP of Engineering
“We originally started looking at imgix because our infrastructure team was unhappy with the number of resources performing our own image resizing was putting on our cluster. Shifting to imgix reduced image resizing resource consumption in our cluster down by approximately 90%,” recounted Leslie. Leafly was able to save valuable engineering time, as they no longer needed to debug and diagnose performance regressions in the open-source image sizing stack they first worked with.
“imgix has made it easy for frontend developers, who are working closely with the web’s code, to make changes quickly. We’ve used it to force aspect ratios, set quality levels, and resize images for a better mobile experience.”
— Leslie Zavisca, VP of Engineering
