How are dynamic images programmed?

Question

I have two friends that want to create a jewelry store, focused on customized jewels. The core feature is the jewelry designer, based on a jewel model.

Here's an example of the sort of thing I am looking to create : http://www.gemvara.com/jewelry/wisteria-pendant/pear-citrine-18k-yellow-gold-pendant-with-diamond/155hhg

You can use the menu on the right to change different areas of the final image, such as the gems or metal used. If you right-click on the image, you can see it's a complete jpg.

How is this kind of dynamic image designed and programmed?

Answer 1

In the specific case in the example they seem to be combining images of the different parts on the server and then sending a complete image to the browser. As can be seen if we take a look at the URL and start removing things so that we get access to the debug page: http://prodimage-725655301.us-east-1.elb.amazonaws.com/image-generator/debug-product-images/?path=%2FBEH-PEN-01%2FP%2F2%2F14YG-18WG-S-P-G-CH_BOX_-75_14RG_18%2F450%2Fpear-blue-sapphire-14k-yellow-gold-pendant-with-peridot-and-red-garnet.jpg

I don't think they wanted the debug page open to all but now that it is it allows us to see how they do it in the example and it gives us an approach if we want to do something similar ourselves.

Answer 2

I'm pretty sure they're generated on the fly based on a bunch of parameters.

You'll note if you Inspect Element that the HTML for the tag includes some code :

• data-itemcode="BEH-PEN-01"
  Probably the initial base image to use. In this case, Pendent 01
• data-angle="P"
  Angle probably specifies which version of the image to generate. For example, there are 4 images below the main image.
• data-version="2"
  Perhaps there was once a version 1 of their image generator tool?
• data-generatedname="18YG-18RG-I-D-D-CH_CBL_1-5_SS_18"
  Actual data for generated item. You'll note this matches what you select in the dropdowns on the right, such as "18YG" = 18k Yellow-Gold, "18RG" = 18k RoseGold, "CH_CBL_1-5_SS_18" = 1.5mm Cable Chain Sterling Silver 18", etc.
• data-size="450"
  Final image size to render
• data-slug="pear-citrine-18k-yellow-gold-pendant-with-diamond"
  user-friendly title to use

If you take the actual image url, you can alter parameters to play around with different variations.

http://sd2.gemvara.net/image-generator/BEH-PEN-01/P/2/18YG-18RG-E-D-D-CH_CBL_1-5_SS_18/450/pear-emerald-18k-yellow-gold-pendant-with-diamond.jpg

For example, "450" can be changed to another size to alter image size. Or "YG" can be changed to "WG" (White Gold), "RG" (Rose Gold), "SS" (Sterling Silver), etc. Or you can choose "PEN-02" to view a different base image with the same colors. And the final bit, "pear-citrine-18k-yellow-gold-pendant-with-diamond", can be set to anything you want and nothing changes other than the title.

Most likely there is a stock image, probably black and white, with regions defined. The image generator applies a hue shift over the individual regions based on what is specified.

Points to support that :

• If you compare some of the gem colors (Pink Sapphire/Yellow Sapphire for example or Blue Topaz/Green Tourmaline), especially with larger images, you can clearly see the image used is the exact same, only with a different color. This isn't how real individual images would be. I've also seen this kind of stuff before, such as this really poor example where skin tones make it apparent what is happening.

• Example site does have some variation between stock gem images, most noticeably Ruby and Diamond. This makes me think it uses partial image substitution, because a complete image change would be a lot of maintenance for the number of items this site has.

• Some images have poor regions defined, making the overall "photoshop" look more apparent. For example, this one has the large gem region poorly defined, and a dark color gem really shows that.

Best guess is that the site catches anything going to /image-generator/ in the url, and hands it off to an image generator process, which returns the final jpg image for display.