Managing Image Presets

You are reading the AEM 6.1 version of Managing Image Presets.
This documentation is also available for the following versions:  AEM 6.2  AEM 6.0 

Image Presets enable AEM Assets to dynamically deliver images at different sizes, in different formats, or with other image properties there are generated dynamically. Each Image Preset represents a predefined collection of sizing and formatting commands for displaying images. When you create an Image Preset, you choose a size for image delivery. You also choose formatting commands so that the appearance of the image is optimized when the image is delivered for viewing.

Administrators can create presets for exporting assets. Users can choose a preset when they export images, which also reformats images to the specifications that the administrator specifies. 

You can also create image presets that are responsive. If you apply a responsive image preset to your assets, they change depending on the device or screensize they are viewed on.

This section describes how to create, modify, and generally manage image presets.You can apply an image preset to an image anytime you preview it. See Applying Image Presets.

Note

You can also configure image presets to use CMYK in the color space in addition to RGB or Gray if you have the following feature packs for dynamic media color management installed:

See Configuring Dynamic Media for instructions on how to install these feature packs.

Understanding image presets

Like a macro, an Image Preset is a predefined collection of sizing and formatting commands saved under a name. To understand how Image Presets work, suppose your web site requires each product image to appear in different sizes, different formats, and compression rates for desktop and mobile delivery.

You could create two image presets: one with 500 x 500 pixels for desktop version and 150 x 150 pixels for the mobile version. You create two Image Presets, one called Enlarge to display images at 500x500 pixels and one called Thumbnail to display images at 150 x 150 pixels. To deliver images at the Enlarge and Thumbnail size, AEM looks up the definition of the Enlarge Image Preset and Thumbnail Image Preset. Then AEM dynamically generates an image at the size and formatting specifications of each Image Preset.

Images that are reduced in size when they are delivered dynamically can lose sharpness and detail. For this reason, each Image Preset contains formatting controls for optimizing an image when it is delivered at a particular size. These controls make sure that your images are sharp and clear when they are delivered to your web site or application.

Administrators can create Image Presets. To create an image preset, you can start from scratch or you can start from an existing one and save it under a new name.

Managing Image presets

You manage your image presets in AEM by navigating through ToolsAssets, Dynamic Media Settings, to Image Presets.

file

Note

Any image presets you create are also available as dynamic renditions when you preview assets. In order to deliver or preview image presets, they must be published first.

Creating image presets

Creating an image preset allows you to apply those settings to any images when previewing or publishing.

Note

If using Internet Explorer 9, creating a preset does not appear in the preset list immediately after saving. To work around this issue, disable the cache for IE9.

 

To create an image preset:

  1. Navigate through Tools, Assets, Dynamic Media Settings, then Image Presets.

  2. Click the plus + sign. The Edit Image Preset window opens.

    file

    Note

    To make this image preset responsive, leave the width and height blank.

  3. Enter values into the Basic and Advanced tabs as appropriate, including a name. The options are outlined in Image Preset options. Presets appear in the left pane and can be used on-the-fly with other assets.

    file
  4. Click Save.

Creating a Responsive Image Preset

To create a responsive image preset, perform the steps in Creating Image Presets. When entering the height and width in the Edit Image Preset window, erase the values and leave them blank. 

Leaving them blank tells AEM that this image preset is responsive. You can adjust the other values as appropriate. 

file

Note

In order to see the URL and RESS buttons when applying an image preset to an asset, the asset must be published.

Image preset options

When you create or edit image presets, you have the options described in this section. In addition, Adobe recommends some best practice options to start.

Image preset best practices

Adobe recommends these “best practice” option choices to start:

  • Format (Basic tab)- Select JPEG or another format that meets your requirements. All web browsers support the JPEG image format; it offers a good balance between small files sizes and image quality. However, JPEG format images use a lossy compression scheme that can introduce unwanted image artifacts if the compression setting is too low. For that reason, Adobe recommends setting the compression quality (on the slider) to 75. This setting offers a good balance between image quality and small file size.
  • Enable Simple Sharpening - Do not select Enable Simple Sharpening (this sharpening filter offers less control than Unsharp Masking settings).
  • Sharpening: Resampling Mode - Select Bi-Cubic.

Basic tab options

Field Description
Name Enter a descriptive name without any blank spaces. Include the image-size specification in the name to help users identify this Image Preset.
Width and Height Enter in pixels the size at which the image is delivered. Width and height must be larger than 0 pixels. If either value is 0, then no preset is created. If both values are blank, a responsive image preset is created.
Format

Choose a format from the menu.

Choosing JPEG offers the following additional options:

  • Quality - Controls the JPEG compression level. This setting affects both file size and image quality. The JPEG quality scale is 1–100. Scale is visible when you drag the slider.
  • Enable JPG Chrominance Downsampling - Because the eye is less sensitive to high-frequency color information than high-frequency luminance, JPEG images divide image information into luminance and color components. When a JPEG image is compressed, the luminance component is left at full resolution, while the color components are downsampled by averaging together groups of pixels. Downsampling reduces the data volume by one half or one third with almost no impact on perceived quality. Downsampling is not applicable to grayscale images. This technique reduces the amount of compression useful for images with high contrast (for example, images with overlaid text).
Choosing GIF or GIF with alpha provides these additional GIF Color Quantization options:
  • Type - Select Adaptive (the default), Web, or Macintosh. If you select GIF with Alpha, the Macintosh option is not available.
  • Dither - Select Diffuse or Off.
  • Number of Colors - Enter a number between 2 and 256.
  • Color List - Enter a comma-separated list. For example, for white, gray, and black, enter 000000,888888,ffffff.
Choosing PDF, TIFF, or TIFF with alpha provides this additional option:
  • Compression - Select a compression algorithm. Algorithm options for PDF are None, Zip, and Jpeg; for TIFF are None, LZW, Jpeg, and Zip; and for TIFF with Alpha are None, LZW, and Zip.

Choosing PNGPNG with Alpha, or EPS provides no additional options.

Sharpening Select the Enable Simple Sharpening option to apply a basic sharpening filter to the image after all scaling takes place. Sharpening can help compensate for blurriness that can result when you display an image at a different size. 

Advanced tab options

Field Description
Color Space

Select RGB, CMYK, or Grayscale for the color space.

Note: CMYK is only available if you have the color management feature installed. See Configuring Dynamic Media Color Management.

Sharpening

Select None, Sharpen, or Unsharp Mask

  • Select None to disable sharpening.
  • Select Sharpen to apply a basic sharpening filter to the image after all scaling takes place. Sharpening can help compensate for blurriness that can result when you display an image at a different size. 
  • Select Unsharp mask to fine-tune a sharpening filter effect on the final downsampled image. You can control intensity of effect, radius of the effect (measured in pixels) and a threshold of contrast that will be ignored. This effect uses the same options as Photoshop’s “Unsharp Mask” filter.

In Unsharp Mask, you have the following options:

  • Amount - Controls the amount of contrast applied to edge pixels. The default is 1.0. For high-resolution images, you can increase it to as high as 5.0. Think of Amount as a measure of filter intensity.
  • Radius - Determines the number of pixels surrounding the edge pixels that affect the sharpening. For high-resolution images, enter from 1 through 2. A low value sharpens only the edge pixels; a high value sharpens a wider band of pixels. The correct value depends on the size of the image.
  • Threshold - Determines the range of contrast to ignore when the unsharp mask filter is applied. In other words, this option determines how different the sharpened pixels must be from the surrounding area before they are considered edge pixels and are sharpened. To avoid introducing noise, experiment with values between .02 and 0.2. 
  • Apply to - Determines whether the unsharpening applies to each color or brightness.
Sharpening is described in Sharpening Images.
Resampling Mode Select a Resampling mode option. These options sharpen the image when it is downsampled:
  • B-Linear - The fastest resampling method. Some aliasing artifacts are noticeable.
  • Bi-Cubic - Increases CPU usage but yields sharper images with less noticeable aliasing artifacts.
  • Sharp2 - Can produce slightly sharper results than Bi-Cubic, but at an even higher CPU cost.
  • Each Color and Brightness - each method can be based on color or brightness. By default Each Color is selected.
Print resolution Select a resolution for printing this image; 72 pixels is the default.
Image Modifier

Beyond the common image settings available in the UI, Dynamic Media supports numerous advanced image modifications that you can specify in the Image Modifiers field. These parameters are defined in the Image Server Protocol command reference.

Important: The following functionality listed in the API is not supported:

  • Basic templating and text rendering commands: text=  textAngle=  textAttr=  textFlowPath= textFlowXPath=  textPath= and textPs=
  • Localization commands: locale= and req=xlate
  • req=set is not available for general usage.
  • req=mbrset
  • req=saveToFile
  • req=targets
  • template=
  • Non-core Dynamic Media services: SVG, Image Rendering, and Web-to-Print
  • (Available only with the installation of Feature Packs 7938 and 8956) Color correction commands: icc= and iccEmbed=

Defining Image Preset options with Image Modifiers

In addition to the options available in the Basic and Advanced tabs, you can define image modifiers to give you more options when defining image presets. Image Rendering relies on the Scene7 image rendering API and are defined in detail in the HTTP Protocol Reference.

The following are some basic examples of what you can do with image modifiers. 

Note

Some image modifiers cannot be used in AEM

  • op_invert - Inverts each color component for a negative image effect.

    &op_invert=1
            

    Code samples are intended for illustration purposes only.

    file
  • op_blur - Applies a blur filter to the image.

    &op_blur=25
            

    Code samples are intended for illustration purposes only.

    file
  • Combined commands - op_blur and op-invert

    &op_invert=1&op_blur=25
            

    Code samples are intended for illustration purposes only.

    file
  • op_brightness - Decreases or increases the brightness.

    &op_brightness=75
            

    Code samples are intended for illustration purposes only.

    file
  • opac - Adjusts image opacity. Lets you decrease the foreground opacity.

    opac=50
            

    Code samples are intended for illustration purposes only.

    file

Modifying image presets

To edit image presets:

  1. In Tools, click Assets, Dynamic Media Settings, and then Image Presets.

    file
  2. Select a preset and then click the Edit icon. The Edit Image Preset window opens.

  3. Make changes and click Save to save your changes or Cancel to cancel your changes.

Deleting Image Presets

To delete image presets:

  1. In Tools, select AssetsDynamic Media Settings, and then Image Presets.

  2. Select a preset by selecting the check box next to the image preset, and then click the Trash icon. Dynamic Media confirms that you want to delete it. Click OK to delete or click Cancel to abort.

​