Managing Dynamic Media image presets managing-image-presets
Image Presets enable Adobe Experience Manager Assets to dynamically deliver images 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 Applying Image Presets.
Understanding Dynamic Media 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 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, Experience Manager looks up 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.
Managing Dynamic Media image presets managing-image-presets-1
You manage your image presets in Experience Manager by tapping or clicking the Experience Manager logo to access the global navigation console and then tapping or clicking the Tools icon and navigating to Assets > Image Presets.
Smart crops, Adobe Illustrator (AI), Postscript (EPS), and PDF file formats adobe-illustrator-ai-postscript-eps-and-pdf-file-formats
If you intend to support the ingestion of AI, EPS, and PDF files so that you can generate dynamic renditions of these file formats, review the following information before you create image presets.
Adobe Illustrator’s file format is a variant of PDF. The main differences, in the context of Experience Manager Assets, is the following:
- Adobe Illustrator documents consist of a single page with multiple layers. Each layer is extracted as a PNG subasset under the main Illustrator asset.
- PDF documents consist of one or more pages. Each page is extracted as a single page PDF subasset under the main multi-page PDF document.
The subassets are created by the Create Sub Asset process
component within the overall DAM Update Asset
workflow. To see this process component within the workflow, select Tools > Workflow > Models > DAM Update Asset > Edit.
See also Viewing pages of a multi-page file.
You can view the subassets or the pages when you open the asset, select the Content menu, and select Subassets or Pages. The subassets are real assets. That is, PDF pages are extracted by the Create Sub Asset
workflow component. They are then stored as page1.pdf
, page2.pdf
, and so on, below the main asset. After they are stored, the DAM Update Asset
workflow processes them.
To use Dynamic Media to preview and generate dynamic renditions for AI, EPS or PDF files, the following processing steps are required:
-
In the
DAM Update Asset
workflow, theRasterize PDF/AI Image Preview Rendition
process component rasterizes the first page of the original asset–using the configured resolution–into acqdam.preview.png
rendition. -
The
cqdam.preview.png
rendition is then optimized into a PTIFF by theDynamic Media Process Image Assets
process component within the workflow.
PDF/AI/EPS asset metadata properties pdf-ai-eps-asset-metadata-properties
dam:Physicalwidthininches
dam:Physicalheightininches
You access Rasterize PDF/AI Image Preview Rendition
process component options by way of the DAM Update Asset
workflow.
In the upper-left corner, select Adobe Experience Manager, navigate to Tools > Workflow > Models. On the Workflow Models page, select DAM Update Asset, then on the toolbar select Edit. On the DAM Update Asset workflow page, double-select the Rasterize PDF/AI Image Preview Rendition
process component to open its Step Properties dialog box.
Rasterize PDF/AI Image Preview Rendition options rasterize-pdf-ai-image-preview-rendition-options
Arguments to rasterize PDF or AI workflow
Using the default process arguments, the first page of a PDF/AI document is rasterized at 72 ppi and the generated preview image is sized at 2048 x 2048 pixels. For a typical deployment, you may want to increase the resolution to a minimum of 150 ppi or more. For example, a US letter size document at 300 ppi requires a maximum width and height of 2550 x 3300 pixels, respectively.
Max Width and Max Height limit the resolution at which to rasterize. For example, if the maximums are unchanged, and Resolution is set to 300 ppi, a US Letter document is rasterized at 186 ppi. That is, the document is 1581 x 2046 pixels.
The Rasterize PDF/AI Image Preview Rendition
process component has a maximum defined to ensure that it does not create overly large images in memory. Such large images can overflow the memory provided to the JVM (Java™ Virtual Machine). Care must be taken to provide the JVM with enough memory to manage the configured number of parallel workflows, with each having the potential to create an image at the maximum configured size.
InDesign (INDD) file format indesign-indd-file-format
If you intend to support the ingestion of INDD files so that you can generate dynamic rendition of this file format, you may want to review the following information before you create image presets.
For InDesign files, sub assets are extracted only if the Adobe InDesign Server is integrated with Experience Manager. Referenced assets are linked based on their metadata. InDesign Server is not required for linking. However, the referenced assets must be present within Experience Manager before the InDesign files are processed for the links to be created between the InDesign files and the referenced assets.
See Integrating Experience Manager Assets with InDesign Server.
The Media Extraction process component in the DAM Update Asset
workflow runs several preconfigured Extend Scripts to process InDesign files.
The ExtendScript paths in the arguments of Media Extraction process component in the DAM Update Asset workflow.
The following scripts, are used by Dynamic Media integration:
Configuring image thumbnail size configuring-image-thumbnail-size
You can configure the size of thumbnails by configuring those settings in the DAM Update Asset workflow. There are two steps in the workflow where you can configure the thumbnail size of image assets. Although (Dynamic Media Process Image Assets) is used for dynamic image assets, and (Process Thumbnails) is for static thumbnail generation, or when all other processes fail to generate thumbnails, both must have the same settings.
With the Dynamic Media Process Image Assets step, thumbnails are generated by the image server, and this configuration is independent of the configuration applied to the Process Thumbnails step. Generating thumbnails through the Process Thumbnails step is the slowest and most memory intensive way to create thumbnails.
Thumbnail sizing is defined in the following format: widthcenter, for example, 80:80:false
. The width and height determine the size in pixels of the thumbnail. The center value is either false or true and if set to true, it indicates that the thumbnail image has exactly the size given in the configuration. If the resized image is smaller, it is centered within the thumbnail.
-
Thumbnail sizes for EPS files are configured in the EPS thumbnails step, in the Arguments tab under Thumbnails.
-
Thumbnail sizes for videos are configured in the FFmpeg thumbnails step, in the Process tab under Arguments.
To configure image thumbnail size:
-
Select Tools > Workflow > Models > DAM Update Asset > Edit.
-
Select the Dynamic Media Process Image Assets step and click the Thumbnails tab. Change the thumbnail size, as needed, then select OK.
-
Select the Process Thumbnails step, then select the Thumbnails tab. Change the thumbnail size, as needed, then select OK.
note note NOTE The values in the thumbnails argument in the Process Thumbnails step must match the thumbnails argument in the Dynamic Media Process Image Assets step. -
Select Save to save the changes to the workflow.
Increasing or decreasing the number of Dynamic Media image presets that display 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.
Increase or decrease the number of Dynamic Media image presets displayed:
-
Navigate to CRXDE Lite (https://localhost:4502/crx/de).
-
Navigate to the image preset listing node at
/libs/dam/gui/coral/content/commons/sidepanels/imagepresetsdetail/imgagepresetslist
-
In the limit property, change the Value, which is set to 15 by default, to the desired number.
-
Navigate to the image preset datasource at
/libs/dam/gui/coral/content/commons/sidepanels/imagepresetsdetail/imgagepresetslist/datasource
-
In the limit property, change the number to the desired number, for example,
{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}
-
Select Save All.
Creating a Dynamic Media image preset creating-image-presets
Creating a Dynamic Media image preset lets you apply those settings to any images when previewing or publishing.
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, you may want to review the following information before you create image presets.
See InDesign (INDD) file format.
To create a Dynamic Media image preset:
-
In Experience Manager, select the Experience Manager logo to access the global navigation console, then select Tools > Assets > Image Presets.
-
Click Create. The Edit Image Preset window opens.
note note NOTE To make this image preset responsive, erase the values in the width and height fields and leave them blank. -
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.
-
Click Save.
Creating a responsive image preset 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 Experience Manager that this image preset is responsive. You can adjust the other values as appropriate.
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
Advanced tab options advanced-tab-options
Defining 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 image rendering API that is defined in detail in the HTTP Protocol Reference.
The following are some basic examples of what you can do with image modifiers.
-
op_invert - Inverts each color component for a negative image effect.
code language-xml &op_invert=1
-
op_blur - Applies a blur filter to the image.
code language-xml &op_blur=7
-
Combined commands - op_blur and op-invert
code language-xml &op_invert=1&op_blur=7
-
op_brightness - Decreases or increases the brightness.
code language-xml &op_brightness=58
-
opac - Adjusts image opacity. Lets you decrease the foreground opacity.
code language-xml opac=29
Editing Image Presets modifying-image-presets
-
In Experience Manager, select the Experience Manager logo to access the global navigation console, then select Tools > Assets > Image Presets.
-
Select a preset and then click Edit. The Edit Image Preset window opens.
-
Make changes and click Save to save your changes or Cancel to cancel your changes.
Publishing Dynamic Media image presets publishing-image-presets
If you are running Dynamic Media - Hybrid mode, you must manually publish image presets.
(If you are running Dynamic Media - Scene7 mode, image presets are automatically published for you; you do not need to complete these steps.)
To publish image presets in Dynamic Media - Hybrid mode:
-
In Experience Manager, click the Experience Manager logo to access the global navigation console and click the Tools icon and navigate to Assets > Image Presets.
-
Select the image preset or multiple image presets from the list of image presets and click Publish.
-
After the image preset is published, the status changes from unpublished to published.
Deleting Dynamic Media image presets deleting-image-presets
- In Experience Manager, click the Experience Manager logo to access the global navigation console.
- Select the Tools icon, then navigate to Assets > Image Presets.
- Select a preset, and then click Delete. Dynamic Media confirms that you want to delete it. Select Delete to delete or select Cancel to abort.