Optimize product images

ImageEngine offers a specific directive to make optimization and customization of product images easier: productletterbox

This directive works similar to letterbox, but adds more advanced functionality:

productletterbox attempts to identify the background in the image, removes it and fits the subject (actual product) inside the canvas specified with w_ and h_ directives.

For example, in the illustration below, the original image is to the left, and the optimized product image is to the right. The subject (sweater) has been identified, the gray background replaced with white, and the subject is fitted in a squared image which size is specified by the required w_ and h_ directives.

The url directives in this case would be: /m_productletterbox/w_500/h_500

Additional directives to further customize the image are:

• bg
  • The HEX value of the color the original background should be replaced with. Default is white (ffffff).
• a
  • The alpha transparency - or opacity- of the background.  An integer value 0-100 where 100 is solid and 00 is transparent. Default is 100 (solid).
• tol
  • Number from 0-255, where a low number identifies a lower number of colors as background and high number identifies a wider range of colors as background making the background detection more “aggressive”. Default is auto-detect, which should “work well” for images with good contrast between the background and the subject 
• blur
  • A percentage value which defines the amount of blurring to apply to the edges of the subject. A high number means more blurring. Usually, this directive is only used to handle exceptions and corner cases.
• pad
  • Adds padding between the subject and the edges of the image: pad_<px-top>,<px-left>,<px-bottom>,<px-right> If no padding is provided, the image will be centred on the canvas and at least two edges touching the edge of the image. Default padding is 0.

Example:

/w_500/h_500/m_productletterbox_bg_ff0000_pad_100,10,100,10

The above example with produce a 500x500px image with a red (ff0000) solid background. The distance from the edge of the subject to the top and bottom of the image is 100px and 10px to the left and right.