Two Images and an API: Everything We Need for Recoloring Products
I recently found a solution to dynamically update the color of any product image. So with just one <img> of a product, we can colorize it in different ways to show different color options. We don’t even need any fancy SVG or CSS to get it done! We’ll be using an image editor (e.g. Photoshop or Sketch) and the image transformation service imgix. (This isn’t a sponsored post and there is no affiliation here — it’s just a technique I want to share.) See the Pen Dynamic Car color by Der Dooley (@ddools)on CodePen. I work with a travel software company called CarTrawler on the engineering team, and I recently undertook a project a revamp our car images library that we use to display car rental search results. I wanted to take this opportunity to introduce dynamically colored cars. We may sometimes load up to 200 different cars at the same time, so speed and performance are key requirements. We also have five different products throughout unique code bases, so avoiding over-engineering is vital to success. I wanted to be able to dynamically change the color of each of these cars without needing additional front-end changes to the code. Step 1: The Base Layer I’m using car photos here, but this technique could be applied to any product. First we need a base layer. This is the default layer we would display without any color and it should look good on its own. Step 2: The Paint Layer Next we create a paint layer that is the same dimensions as the base layer, but only contains the areas where the colors should change dynamically. A light color is key for the paint layer. Using white or a light shade of gray gives us a great advantage because we are ultimately “blending” this image with color. Anything darker or in a different hue would make it hard to mix this base color with other colors. Step 3: Using the imgix API This is where things get interesting. I’m going to leverage multiple parameters from the imgix API. Let’s apply a black to our paint layer. (Source URL) We changed the color by applying a standard black hex value of #000000. https://ddools.imgix.net/cars/paint.png?w=600&bri=-18&con=26&monochrome=000000 If you noticed the URL of the image above, you might be wondering: What the heck are all those parameters? The imgix API docs have a lot of great information, so no need to go into greater detail here. But I will explain the parameters I used. w. The width I 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 encoded values — like we’d do if we were using inline SVG as a background image in CSS. https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D000000 Step 4: Stack the Layers Now we are going to use imgix’s watermark parameter to stack the paint layer on top of our base layer. https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=[PAINTLAYER] 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: (Source URL) Now that we have one URL, we can basically swap out the black hex value with any…
Like to keep reading?
This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.