Image Renditions vs Image transformations

Objective

Objective of this document is to define the out of the box Image renditions and processing concepts in AEM and compare with the Image Transformation process using ACS (Adobe Consulting Services) commons library. Its pros/cons are also listed.

Image Renditions vs Image transformations

In Image renditions separate images are created and stored in DAM for each size/resolutions, whereas in transformations one high quality image is uploaded and the same is used in different sizes and resolutions and are transformed according to the need in runtime on the fly and cached in dispatcher.

More details pros/cons are mentioned in below sections.

Image Rendition

Rendition is a process of creating multiple sizes and versions of images post uploading them to DAM (Digital Asset Management). These renditions are helpful in creating thumbnails or smaller image views of large and high-resolution images which can be used in the content of the website for different purposes.

Image Rendition with Cropping in AEM 6.5

“DAM Update Asset” is a default workflow which is triggered whenever any asset is uploaded into the DAM. This workflow helps to limit the size and the quality of the image displayed.

Why Image Renditions are required

1. Using different size images on the websites.

2. Images for different devices or viewPort.

3. Reducing the page load time.

Steps for creating rendition in AEM

1. Click the Tools icon in siteadmin page.

2. Click Tools > Workflow > Models.

3. From the Models console, select the DAM Update Asset workflow.

4. A new window (named after the workflow) opens for editing and configuring the workflow.

5. Right-click the process thumbnail component in the workflow, and click Edit.

6. Click the THUMBNAILS tab from dialog.

a. Enter a rendition values for the thumbnails text field: 1280:1280:false ; 319:319:false ; 48:48:false (dynamically as per requirement ).

[ Note : As above, if the centre flag is set as false and if the resized image is smaller it will be centred within the thumbnail. If it is set true, the thumbnail image will have exactly the size given by the configuration. Better to retain flag as false ].

7. Click the WEB ENABLED IMAGE tab from dialog:

a. Add the value for width and height: 1280 , 1280(pixels) respectively. It can be any dynamic value. If the field is left empty the default value will be applied as 1000*1000.

b. Add the value for quality: 90 (by default).

c. Add the value for mime type: image/png (by default).

d. Add the value for keep format list: image /jpeg, image/jpg. (list of mime type to keep the format of the asset).

e. Add the value for Skip list: application/pdf , audio/mpeg (list of mime type to skip the process).

This web enabled image combination helps to limit the size and the quality of the image displayed thus reducing the page load time.

8. Click OK, and then click Save in the top left.

9. Go back to the damadmin page of the browser.

10. Click New > NewFile > Browse > select an image > upload for uploading an image.

11. Go back to the crx/de page of the browser and click content > dam > image >jcr:content > renditions to view the newly created rendition .

Steps to use rendition images :

12. By Dialog using property predicate, rendition images will be bound.

Name = predicate

Type = String

Value = nosystem

13. OSGI service , which exposes images based on rendition should be created It should fetch the rendition images when hit through browser (e.g., [localhost:4502/ imageServlet.480.480.png] should give you an image of size 480*480 ).

14. Go back to the system/console/bundles page of the browser and click install/update to add the newly created service bundle and make it active.

15. In html code inside the img src=” “,call the end point servlet and pass the rendition. Instead of < div > use < picture > tag.

Adding additional web enabled or thumbnail image component step:

16. Follow step 1 to 4 and from the sidekick panel on the right side, drag the create web enabled image/create thumbnail component (from DAM) to the end of the workflow.

17 ) Right-click the newly added component in the workflow, and click Edit . Repeat steps (6-15)for creating rendition.

Arguments: The custom workflow takes the arguments as input, fetch the original image size and crop the image from top, bottom, left and right.

Example: Let’s suppose the original size of image is “2200*1200” and the required image size is “640*360” .

Reduce the image from left and right equally ( 780px) to make the width as 640.
Reduce the image from top and bottom equally ( 420px) to make the height as 320.

Rendition Pros And Cons

Pros

1. Renditions are created immediately after the images are uploaded to DAM.

2. Renditions are readily available for author to preview.

Cons

1. Occupies more space (as separate images are created for every size defined), if renditions are used with the DAM UPDATE ASSEST workflow.

2. Need to re-run the workflow if new rendition is required.

3. While processing above 800 pixels, the size of the rendered image will be larger than the original image on proceeding with process thumbnail step. To overcome this a new component create web enabled image can be added to proceed further

Image Tranformation

Purpose

Many web site designs demands consistency of images based on their use within components. For example, a panoramic spotlight may demand the image be 960 x 400, and bio picture must be 100 x 100 and greyscale.

The ACS AEM Commons Named Transform Image Servlet allows specific image transforms to be defined centrally via OSGi configurations. These image transforms can be easily invoked via parameterized HTTP GET requests to image resources in AEM.

Example

The below DAM Asset image has been resizes, rotated, cropped and greyscaled as defined by the custom defined my-transform-name transform rule set.

( Original image on left. Transformed image on right. )

Supporting OSGi Configuration

Supported “image-y” resources:

Almost any “image-like” resource can be requested using the named transform URI parameterization, and the underlying image will be derived and rendered using the transformation parameters.

1. Pages (cq:Page)

HTTP GET /content/acme/article.transform/feature/image.png

2. Image component resources

HTTP GET /content/acme/article/_jcr_content/image.transform/feature/image.png

3. DAM Assets (dam:Asset)

HTTP GET /content/dam/images/dog.jpg.transform/feature/image.jpg

4. DAM Asset Renditions

HTTP GET /content/dam/images/dog.jpg/jcr:content/renditions/thumbnail.jpg.transform/feature/image.jpg

5. “Raw” Binary Images (nt:file or nt:resource)

HTTP GET /etc/designs/acme/images/cat.png.transform/feature/image.jpg

How to Use

1. Define any number of sling:OsgiConfig’s, each representing a different named transform

/apps/mysite/config/com.adobe.acs.commons.images.impl.NamedImageTransformerImplmyTransformName.xml

<?xml version=”1.0″ encoding=”UTF-8″?>

<jcr:root xmlns:sling=“http://sling.apache.org/jcr/sling/1.0” xmlns:cq=“http://www.day.com/j

cr/cq/1.0” xmlns:jcr=“http://www.jcp.org/jcr/1.0” xmlns:nt=“http://www.jcp.org/jcr/nt/1.0“

jcr:primaryType=“sling:OsgiConfig”

name=“my-transform”

transforms=“[resize:width=400,rotate:degrees=10]”/>

1. Order matters when defining your image transformation rules. For example, a resize then crop can yield significantly different results than a crop then resize.

2. Get the URI to a supported resource (see above) to transform

3. add the .transform extension (append this even if the resource is named with an extension; like a DAM asset)

4. Add an initial suffix segment that matches your transform name (Ex. /my-transform)

5. Add a final suffix segment of /image.<image-format-extension> OR /img.<imageformat-extension>

Resulting in

<img src=”/content/mysite/article/_jcr_content/image.transform/mytransform/image.png”/>

<img src=”/content/dam/images/dog.jpg.transform/my-transform/img.png”/>

Use-case:

You want a custom image rendition, i.e. something that’s not out-of-the-box for AEM. Also, you don’t want to tap into AEM’s asset updater, add the rendition, and rerun the asset-update workflow for the billions of images in your instance. Something like this might easily bring the instance down on your knees..

Solution:

1. Use AEM’s “Named Image Transform Servlet”

Methodology:

The application is pretty standard. This solution uses ACS AEM Common’s “Named Image Transform Servlet” which takes in an OSGI configuration node, and renders the rendition on the fly. The key idea is that images are cached in the dispatcher, so that performance is not hampered in production. This caching should be enabled by default on all dispatchers.

Steps:

Create an OSGI configuration file. The application I need defines the file as follows: – com.adobe.acs.commons.images.impl.NamedImageTransformerImpl.xml with content:

Change your image tag in the JSP file so that it reads as follows:

Advantages

1. It doesn’t Occupy more space, because new transfer image will create at the time of page load and it is cached inside that page in dispatcher level.

2. When new rendition image required then no need to upload new image it will create from existing image when page is going to load.

3. Flexible to configure custom viewports on-the-fly.

4. Have an option to control the quality of the image.

Examples of Transformation

Example 1

Original Image – 179kb