by Dermot Dooley, Senior Engineering Manager at CarTrawler
May 19, 2020
This article is about a solution we found using imgix to dynamically update the color of any product in an HTML<img> element without using SVGs or any CSS.
CarTrawler is a B2B travel technology company based in Dublin, Ireland. We specialize in car rentals and ground transportation services and help bring car rental solutions to nearly one billion passengers annually.
Recently we undertook a project to overhaul the car images library that we use to display car rental search results. We wanted to have consistent, high-resolution images that we could resize and optimize on the fly to deliver the best results for our customers over multiple different touch points.
CarTrawler technology allows our partners to display car rentals from up to 2,000 separate car rental providers. We deliver hundreds of vehicles within seconds to any device to give our customers the best and broadest choice of car rentals possible.
DatoCMS is an API-first headless CMS, which means that all of the CMS functionality we offer is programmable through our API. As with any CMS, images are a big part of the content that we handle for our users. While images are a spectacular way of improving conversions, enhancing the user experience, and engaging visitors, they also pose a real engineering and design challenge.
As new devices boast retina displays and higher resolutions, designers are eager to leverage these resolutions to provide beautiful vibrant graphics. But, that comes at a cost: asset size and potentially site performance. To get a sense of the growth, average page weight has increased by 34-55% in the last 3 years, of which 70% is due to heavier images. If you’re on a fiber connection, downloading 1.7MB of data for a single web page might not slow you down much, and it gives you a richer experience. But if you’re on a cellular connection, you would probably prefer a lower quality image to a painfully slow page.
At imgix, it’s important to us to accommodate your existing storage systems; we don’t want you to have to re-upload all of your images before you can access imgix’s image processing capabilities. Our existing Source types (Amazon S3, Google Cloud Storage, Web Folder Sources, and Web Proxy Sources) address the vast majority of our customers’ needs, and we hope Microsoft Azure will be a welcome addition.
Previously, if you had already invested in Microsoft’s Azure cloud storage, then integrating with imgix would have required either moving your images to a different storage system or making your images public so that you could use a Web Folder Source. Now you can easily set up a Source directly with Azure—no workarounds required.
Are you unsure of what’s in your image bucket? Not really certain what’s lurking in those depths or how to find a specific image you’re looking for? Imagine a way to get a real handle on your images at last: to browse them by visual content or color, to flag adult or violent content, or to add additional data to suit your unique organizational needs — all without moving or re-uploading your images. Now fantasize no longer! We’re excited to announce the beta of our new Image Manager, a sophisticated platform you can use to search, organize, and even automatically tag the sea of images in your cloud storage. Now you can do more than simply store your images; you can see how your images can best work for you.
We are pleased to announce that imgix now supports two additional image formats, WebP and SVG, as accepted inputs. We recognize that many of our clients rely on user-generated images, and so we strive to support as many image formats as possible. With our latest additions, our list of accepted inputs now includes 17 different image formats.
Transforming, manipulating, and applying artistic effects to images is already a cinch with imgix’s parameters, but we’ve gone even further to simplify your work: now you can use color keywords directly in your imgix URLs. If you’re tired of looking up the corresponding hex codes for individual colors, or if you’ve been secretly hoping for a more intuitive process, you’re in luck. For all imgix parameters that accept hexadecimal color values, you can now use the names of the actual colors. The list of color keywords we accept is the same as the CSS named colors.