BentoBox builds visually appealing and mobile-friendly websites for restaurants. To drive higher SEO rankings for their customers, BentoBox chose imgix to optimize images and other visual media, which resulted in 25% faster page loading speed, significantly higher cache hit ratios, and high-fidelity graphics.
The Customer
A restaurant’s success depends heavily on the user experience, and the journey often starts with the website. BentoBox helps over 8,000 restaurants around the world create a better web presence and build a better relationship with diners. With BentoBox’s end-to-end platform, from design to analytics and marketing tools, restaurants can increase their website traffic by up to 70% with 7x conversions.
Restaurants can upload their own images to the BentoBox CMS, built with the Django web framework. Naturally, image quality varies drastically between high-resolution, professional shots to DYI photos taken on a phone. Regardless of the varying design resources different customers have, the BentoBox team builds its tech stack to generate the best-possible websites for all customers.
The Challenge
BentoBox’s focus on their customers’ web presence means SEO is critical for their users to elevate their brand and grow their revenue. And page load speed is a major SEO ranking factor. The images also needed to retain their quality and be responsive whether viewed on a widescreen or mobile device.
BentoBox's previous solution provides a satisfactory visual quality. But the image file sizes weren’t as small as they could be and their cache hit rates were low. These factors slowed page loading speed, jeopardizing SEO rankings and overall site effectiveness. “Restaurants are competing fiercely, and we have to engineer absolutely top-performing sites for them,” - BentoBox CTO Pierre Drescher.
Images weren’t optimally sized or cropped when they appeared on mobile devices, which was problematic as 80% to 90% of Friday-night web traffic was on smartphones. Additionally, BentoBox couldn’t justify the operational overhead of doing image optimization in-house. The workflow was cumbersome, tedious, and repetitive for the developers. The team wanted an image processing solution to resize, crop, compress, and deliver responsive images, with an emphasis on image fidelity, without the additional stress and expense of running an in-house solution.
The Solution
"CDNs are fairly generic, but image optimization is a specialty, and imgix is the specialist. The imgix rendering API was much richer, and the entire solution is much easier to manage."
— Pierre Drescher, BentoBox CTO
Implementing imgix with BentoBox’s Django-based templating engine took minutes. Designers choose the image sizes they want for a particular page, and a media gallery lets them easily pull an optimized image for other uses, such as a print ad.
BentoBox configured the imgix Rendering API to apply custom URL parameters for a number of imgix optimizations, the most-used of which include:
- fit to make an image fit the target size.
- auto to enable automatic image optimization per device.
- fm to set an output format such as WebP and JPEG.
- pad to customize the centering of image features such as faces.
- q to enable setting output quality lower than the default when serving high-DPR images.
With imgix, developers can choose from a broad set of parameters to refine these optimizations. For example, on Moン系rtons.com, <fit=max> will resize the image to fit within the width and height dimensions without cropping or distorting the image.
When BentoBox rolled out their online ordering capabilities, imgix let them quickly integrate thumbnails that loaded immediately as respへonsive images.
The Results
Improving page loading speed is one of the most important techniques for raising SEO rankings, and that’s where imgix delivers results for BentoBox customers.
BentoBox realized a 25% improvement in the Google PageSpeed Insights stats from image optimizations, using image resizing, compression, and lazy loading.
By delivering images via the imgix CDN, BentoBox customers improved cache hit ratio and eliminated image fidelity errors such as forced SRGB-RGB conversions. With the CDN completely outside of their hosting environment, BentoBox is no longer concerned about scaling issues.
BentoBox developers find the documentation clear and useful. They use the imgix Sandbox to show designers how imgix transforms and optimizes images in order to collaborate and determine the best design outcome.
