Manage Image Presets managing-image-presets

Image Presets enable Adobe Experience Manager Assets to deliver images dynamically at different sizes, in different formats, or with other image properties that 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 reformat 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 screen size they are viewed on. You can configure Image Presets to use CMYK in the color space in addition to RGB or Gray.

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 Apply Image Presets.

NOTE
Smart imaging works with your existing Image Presets and uses intelligence at the last millisecond of delivery to reduce image file size further based on browser or network connection speed. See Smart Imaging for more information.

Learn about Image Presets 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 that your website 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: 500 x 500 pixels for desktop and 150 x 150 pixels for mobile. 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, Experience Manager finds the definition of the Enlarge Image Preset and Thumbnail Image Preset. Then Experience Manager 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.

Manage Image Presets managing-image-presets-1

You manage your Image Presets in Experience Manager by selecting the Experience Manager logo to access the global navigation console and then selecting the Tools icon and navigating to Assets > Image Presets.

6_5_tools-assets-imagepresets

NOTE
Any Image Presets that you create are also available as dynamic renditions when you preview or deliver assets.
You do not need to publish Image Presets as Image Presets are automatically published.
See Publish Image Presets.
NOTE
The system shows various renditions when you select Renditions in an asset’s Detail View. You can increase or decrease the number of Image Presets that display. See Increase the number of image presets that are displayed.

How Image Presets relate to renditions how-image-presets-relate-to-renditions

Image presets define how Dynamic Media delivers images, including sizing, formatting, compression, and other display parameters. Presets do not generate renditions themselves. Instead, they rely on renditions that are created when assets are processed.

Rendition generation in AEM as a Cloud Service rendition-generation-in-aemaacs

In AEM as a Cloud Service, renditions are generated using Asset Microservices. The DAM Update Asset workflow is not available for customization in Cloud Service.

Important considerations include the following:

  • Renditions are generated at upload time.
  • Changes to a Processing Profile affect newly uploaded assets. Existing assets must be reprocessed if new renditions are required.
  • Workflow model customization is not supported in AEM as a Cloud Service for rendition generation.

Image presets reference available renditions at delivery time. Ensure the required renditions exist before configuring or using image presets.

To control which renditions are generated:

  1. Create or edit a Processing Profile.
  2. Configure the required rendition definitions.
  3. Apply the Processing Profile to the appropriate folder.

When assets are uploaded to a folder that has a Processing Profile applied, Asset Microservices automatically generate the defined renditions.

Increase or decrease the number of image presets that are displayed increasing-or-decreasing-the-number-of-image-presets-that-display

Image presets you create are available as dynamic renditions when you preview assets. Experience Manager shows various dynamic renditions when viewing an asset from Detail View > Renditions. You can increase or decrease the limit of renditions that are displayed.

To increase or decrease the number of image presets that are displayed:

  1. Navigate to CRXDE Lite (https://localhost:4502/crx/de).

  2. Navigate to the image preset listing node at /libs/dam/gui/coral/content/commons/sidepanels/imagepresetsdetail/imgagepresetslist

    increase_decreasethenumberofimagepresetsthatdisplay

  3. In the limit property, change the Value, which is set to 15 by default, to the desired number.

  4. Navigate to the image preset datasource at /libs/dam/gui/coral/content/commons/sidepanels/imagepresetsdetail/imgagepresetslist/datasource

    chlimage_1-495

  5. In the limit property, change the number to the desired number, for example, {empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}

  6. Select Save All.

Create Image Presets creating-image-presets

Create Image Presets so you can apply settings consistently across images when you preview or publish.

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.

If you intend to support the ingestion of AI, PDF, and EPS files so that you can generate dynamic rendition of these file formats, review the following information before you create Image Presets.

See Adobe Illustrator (AI), PostScript® (EPS), and PDF file formats.

If you intend to support the ingestion of INDD files so that you can generate dynamic rendition of this file format, review the following information before you create Image Presets.

See InDesign (INDD) file format.

To create image presets:

  1. In Experience Manager, select the Experience Manager logo to access the global navigation console, then go to Tools > Assets > Image Presets.

  2. Select Create.

    chlimage_1-496

    note note
    NOTE
    To make this Image Preset responsive, erase the values in the width and height fields and leave them blank.
  3. In the Edit Image Preset window, 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.

    6_5_imagepreset-edit

  4. Select Save.

Creating a responsive Image Preset creating-a-responsive-image-preset

To create a responsive Image Preset, perform the steps in Create 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 Experience Manager that this Image Preset is responsive. You can adjust the other values as appropriate.

NOTE
To see the URL and RESS buttons when applying an Image Preset to an asset, the asset must be published.
chlimage_1-79
Image presets and image assets are automatically published.

Image Preset options image-preset-options

When you create or edit Image Presets, you have the options described in this section. In addition, 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 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 Sharp2.

Basic tab options basic-tab-options

Field
Description
Name
Enter a descriptive name without any blank spaces. To help users identify this Image Preset, include the image-size specification in the name.
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 other options:
Quality - The JPEG quality scale is 1-100. The 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 to half or one-third with minimal 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 (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 2 - 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 they are None, LZW, Jpeg, and Zip; and for TIFF with Alpha are None, LZW, and Zip.

Choosing PNG, PNG with Alpha, or EPS provides no additional options.
Sharpening
Select Enable Simple Sharpening 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 advanced-tab-options

Field
Description
Color Space
Select RGB, CMYK, or Grayscale for the color space.
Color Profile
Select the output color space profile that you want the asset converted to if it is different from the working profile.
Render Intent

You can override the default rendering intent. Rendering intents determine what happens to colors that cannot be reproduced in the target color profile (out of gamut). The Render Intent is ignored if it is not compatible with the ICC profile.

  • Select Perceptual to compress the total gamut from one color space into another color space when one or more colors in the original image is out of the gamut of the destination color space.
  • Select Relative Colorimetric when a color in the current color space is out of gamut in the target color space. And you want to map it to the closest target color gamut without altering other colors.
  • Select Saturation if you want to reproduce the original image color saturation when converting into the target color space.
  • Select Absolute Colorimetric to match colors exactly with no adjustment for white point or black point that would alter the image's brightness.
Blackpoint Compensation
Select this option if the output profile supports this feature. Blackpoint compensation is ignored if it is not compatible with the specified ICC profile.
Dithering
Select this option to avoid or reduce possible color banding artifacts.
Sharpening Type

Select None, Sharpen, or Unsharp Mask.

  • Select None if you want 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 if you want to fine-tune a sharpening filter effect on the final downsampled image. You can control the intensity of the effect, radius of the effect (measured in pixels) and a threshold of contrast that is 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 real number value 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 a real number 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 defines how much sharpened pixels must differ from the surrounding area to be considered edge pixels and sharpened. To avoid introducing noise, experiment with integer values from 2 through 20.
  • Apply to - Determines whether the unsharpening applies to each color or brightness.

Sharpening is described in Using Image Sharpening with Experience Manager Dynamic Media video, in Sharpening an image online Help topic, and in Best practices for sharpening images in Dynamic Media Classic downloadable PDF.

Resampling Mode

Select a Resampling mode option. These options sharpen the image when it is downsampled:

  • Bi-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.
  • Bi-Sharp - Selects Photoshop default resampler for reducing image size, which is called bicubic sharper in Adobe Photoshop.
  • 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

Define Image Preset options with image modifiers 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 Dynamic Media Image Rendering API and is 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 Experience Manager.
  • op_invert - Inverts each color component for a negative image effect.

    code language-xml
    &op_invert=1
    

    6_5_imagepreset-edit-invert

  • op_blur - Applies a blur filter to the image.

    code language-xml
    &op_blur=7
    

    6_5_imagepreset-edit-blur

  • Combined commands - op_blur and op-invert

    code language-xml
    &op_invert=1&op_blur=7
    

    chlimage_1-80

  • op_brightness - Decreases or increases the brightness.

    code language-xml
    &op_brightness=58
    

    6_5_imagepreset-edit-brightness

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

    code language-xml
    opac=29
    

    6_5_imagepreset-edit-opacity

Edit image presets modifying-image-presets

  1. In Experience Manager, select the Experience Manager logo to access the global navigation console, then go to Tools > Assets > Image Presets.

    6_5_imagepreset-editpreset

  2. Select a preset and then select Edit. The Edit Image Preset window opens.

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

Publish image presets publishing-image-presets

Image presets are automatically published for you.

Delete image presets deleting-image-presets

  1. In Experience Manager, select the Experience Manager logo to access the global navigation console and select the Tools icon.
  2. Navigate to Assets > Image Presets.
  3. Select a preset, and then select Delete. Dynamic Media confirms that you want to delete it. Select Delete to remove or select Cancel to return to Image Presets.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab