Add Transformations and Conditions

Transformations change the appearance of the original image in many ways, such as adjusting colors or opacity, changing the image size, cropping, or applying a watermark. With conditions you can dynamically apply different transformations depending on the dimensions or orientation of your image. For example, you could apply the crop condition depending on whether the image is portrait, landscape, or square.

Before you begin

Before you add transformations and conditions, be sure you configured your image and quality settings, For more information, see Configure Image and Quality Settings.

You can also create conditional transformations or use variables values in a transformation's fields.
Note: Transformations can interact with each other. Keep in mind that Image and Video Manager applies transformations in order starting with the one at the top of the list.

How to

  1. Select Add Transformation/Condition above the Workflow section.
  2. Select the Transformation or Condition that you want to apply. You can also select a post-processing transformation or condition These manipulate image quality and Image and Video Manager applies them to each image after the image and quality settings. A description of each transformation and condition appears when you select it in the Image and Video Manager, but the following list also describes each transformation and condition:
    If...Then...
    Append

    Allows you to specify an image, text, or a shape to append beside your original image. Any area created that is not covered by either image will be filled with fully transparent pixels.

    Aspect Crop Aspect Crop lets you change the height or width of an image (either by cropping or expanding the area) to an aspect ratio of your choosing.

    You can also use the settings to help define what portion of the original image you want to keep when cropping it to achieve the aspect ratio. Or, if using allowExpansion, you can define the placement of the original image on the new expanded image canvas.

    Background Color Applies the specified color behind transparent or semi-transparent images.
    Blur Applies a Gaussian blur to the image by specifying the strength of the blur. Higher values make the image blurrier.
    Chroma Key Changes any color in an image within the specified volume of the HSL colorspace to transparent or semitransparent. This transformation applies a"green screen" technique commonly used to isolate and remove background colors.
    Watermark/Composite Overlays or underlays a new image, text, or shape on the base image. Specify the applied image and its position and size relative to the base image. You can optionally reduce the opacity for transparency effects
    Contrast Allows you to adjust both the contrast and brightness of an image.
    Crop Describes a box indicating the portion of the image to preserve. Indicate the box’s size with Width and Height. Indicate its position with X Position and Y Position. Optionally, use Gravity to change the frame of reference for the coordinates.
    Face Crop Applies a rectangular crop centered on either all faces or the biggest face.
    Feature Crop Automatically identifies the most important features of an image and crops around as many of those features as possible.
    Fit and Fill Resizes an image to fit within a specific size box and then uses a blurred fill of that same image to cover any transparent space at edges.
    Goop Distorts an image. You can use this for security purposes, such as for creating non-deterministic watermarks.
    Grayscale Renders images in grayscale unless a later transformation applies a color.
    Hue/Saturation/Lightness Adjusts the colors in images. Change Hue by indicating degrees of rotation around the colorwheel. Set Saturation below 1.0 to reduce saturation and above 1.0 to increase saturation. Set Lightness below 1.0 to darken the image and above 1.0 to lighten it.
    Hue/Saturation/Value Adjusts the colors in images. Change Hue by indicating the degrees of rotation around the colorwheel. Set Saturation below 1.0 to reduce saturation and above 1.0 to increase saturation. Set Value below 1.0 to darken the image and above 1.0 to lighten it. Hue/Saturation/Value is identical to Hue/Saturation/Lightness except it replaces the lightness with value. An example of the difference between lightness and value is, given a very light green (almost white) as input, reducing the lightness produces a vibrant green (closer to pure green), whereas reducing the value produces darker colors, close to grey in this case as the input color was very close to white.
    Max Colors Sets the maximum number of colors. This can help to reduce the file size.
    Mirror Allows you to flip an image horizontally or vertically.
    Mono Hue Allows you to set all hues in an image to a single specified hue of your choosing. To specify a hue, indicate the degree of rotation between 0 and 360 degrees around the color wheel. By default Mono Hue applies a red hue, 0.0 on the color wheel. Decimal values are supported when entering a hue value.
    Opacity Specifies a multiplier to apply to the starting opacity. 0.0 is invisible. Values above 1.0 increase the opacity of transparent portions of the starting image.
    Region of Interest Crop

    Allows you to crop to a region around a specified point of interest.

    Relative Crop Allows you to crop or expand an image relative to the image’s current dimensions. Image and Video Manager shrinks or expands each of the four sides of the image. It fills the expanded areas with transparency.
    Remove Color Removes a specified color from an image and replaces it with transparent pixels. This transformation is ideal for removing solid background colors from product images photographed on clean, consistent backgrounds without any shadows. You can enter a hex value or click the color picker to select the color to remove.
    Resize Changes image dimensions by specifying the width or height in pixels. Use Type to allow only increasing or decreasing of image size. Use Aspect to control the aspect ratio. To change the image size as a percentage increase or decrease in dimensions, use the Scale transformation instead.
    Rotate Rotates an image around its center. For example, -90 rotates the image 90 degrees counter-clockwise.
    Scale Changes the image size relative to the starting size. You can scale width and height independently. To preserve the aspect ratio, use the same value for both. To scale an image to a specific width and/or height, use the Resize transformation instead.
    Shear Slants an image into a parallelogram, as a portion of starting dimension. For example, set X-Axis Shear to -0.15 to shift top edge 15% of the width to the right. Set the Y-Axis Shear to 0.10 to shift the left edge 10% of height upward. Empty areas left after shearing are transparent. Apply the Background Color transformation to fill them.
    Trim Applies a rectangular crop that trims uniform areas from the edges of the image.
    Unsharp Mask Applies a filter that emphasizes details to create the effect of sharpening the image.
    If...Then...
    Dimension - Value The value to use as the dimension of the image (in pixels) when Image and Video Manager determines which of the other dimension settings to apply.
    Dimension - Greater Than Applies transformations in the workflow if the image's dimension is greater than the value in the Value field.
    Dimension - Less Than Applies transformations in the workflow if the image's dimension is less than the value in the Value field.
    Dimension - Equal To Applies transformations in the workflow if the image's dimension is equal to the value in the Value field.
    Dimension - Default Applies transformations in your workflow if none of the other dimension settings apply to your image.
    Orientation - Landscape Applies the transformations in your workflow if the image's width is greater than its height.
    Orientation - Portrait Applies the transformations in your workflow if the image's width is less than its height.
    Orientation - Square Applies transformations in your workflow if the image's width is equal to its height.
    Orientation - Default Applies transformations in your workflow if none of the other orientations apply to the image.
  3. After you apply all the transformation and conditions that you want to use, select each transformation and condition and apply all the required settings and any optional ones that you choose.

Next steps

You must save and activate the policy on the on the staging server. For more information on saving and testing your policy on the staging server, see Test on Staging.