How CarTrawler Implemented Dynamic Coloring With imgix

Car Trawler header image

Introduction

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.

Sample search results for desktop/mobile (without color).

We also wanted to take this opportunity to add a new piece of functionality to our library: dynamically-colored cars. Until now, the idea of having multiple different-colored cars would require storing every possible variant and loading them individually. This would kill our ability to scale, so it has always been considered unachievable. To implement this feature successfully, it was vital that we be able to dynamically change the color of each of these cars without affecting the performance of the page, and without needing additional front-end changes to the code.

After some initial research, it was clear that imgix would meet our performance, reliability, and scaling requirements, but it took some additional digging to craft the perfect solution for adding dynamic coloring. After a lot of trial and error for potential solutions, we were finally able to find the perfect answer using a combination of the imgix watermark and monochrome functionality.

In this post we'll share how we achieved this and what the results have looked like so far.

Note: We are using cars but believe this technique could be applied to any product.

Step 1

First, we need a base layer. This is the default layer we would display without any dominant color. This layer should look good on its own as it will also be used as our fallback image.

White car image

https://ddools.imgix.net/cars/base.png

Step 2

Create a second image, a paint layer that is the same dimensions as the base layer. We only want this transparent image to contain the areas you want to dynamically color.

https://ddools.imgix.net/cars/paint.png

https://ddools.imgix.net/cars/paint.png

Step 3

This is where things get interesting. We are going to leverage multiple parameters from the imgix API to display the paint layer on top of the base layer and display both as a single image.

Let's apply a color to our paint layer

https://ddools.imgix.net/cars/paint.png?w=600&amp;bri=-18&amp;con=26&amp;monochrome=000000

https://ddools.imgix.net/cars/paint.png?w=600&bri=-18&con=26&monochrome=000000

We changed the color by applying a standard black hexadecimal value of #000000. But we can use any of the millions of hexadecimal values available.

Let's look at the imgix parameters being used:

  • w: The width we want the image to be
  • bri: Adjusts the brightness level
  • con: Adjusts the amount of contrast
  • monochrome: The dynamic hex color

Because we are going to stack our layers via imgix, we will need to encode our paint layer; That means replacing some of the characters in the URL with their encoded values.

https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D000000

Step 4

Now we are going to use imgix's watermark parameters to stack the paint layer on top of our base layer.

Car with white paint layer

https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=

Let's look at the parameters being used:

  • w: This is the image width and it must be identical for both layers.
  • mark-align: This centers the paint layer on top of the base layer.
  • mark: This is where the encoded paint layer goes.

In the end, you will get a single URL that will look like something like this:

https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D000000

That gives the car in black:

Once you are all set up the last six digits in the link represent the hexadecimal value that can be updated to dynamically change the paint layer.

https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D0d4671

https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D63803a

https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D841210

Updated display with dark car colors applied
Search results with the dark colors dynamically applied.

See it in action

Check out an interactive CodePen here to try out the color-changing option on a vehicle.

Conclusion

That's it! Instead of adding a watermark to our image, we are creating a paint layer for the areas where we want to dynamically change the color. With the help of imgix we can now dynamically serve these images without compromising performance or having any additional JavaScript, CSS, or image calls within our page.

Stay up to date with our blog for the latest imgix news, features, and posts.