Friday, April 3, 2015

How to use HTML5 adaptive image in AEM/Adobe CQ5?

How to use HTML5 adaptive image in AEM/Adobe CQ5?

This post will explain how to use HTML5 adaptive image in Adobe Experience Manager(AEM)

The srcset attribute in HTML5 <img> element, allows us to specify different images for varying viewport widths and pixel densities. This allows us to load a larger image for new high resolution devices while displaying lower resolution images for others

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,image-3x.png 3x, image-4x.png 4x">

The width also can be specified to select the images.

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="Sample Image">

While uploading the images to DAM, Adobe CQ5 will create renditions of an image that include different sizes of the same image.This can be helpful when we need to create thumbnails or smaller views of large, high-resolution images.


The original or different rendition images can be used in HTML5 Adaptive image to display the images based on pixel density of the device,  browser will serve the image based on the resolution of the client.

<img src="/content/dam/Albin/Untitled.jpg/jcr:content/renditions/original" srcset="/content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png 1x,/content/dam/Albin/Untitled.jpg/jcr:content/renditions/original" alt="Sample Image">

3 comments:

  1. The author shares a important function of HTML5. Readers can easily understand this HTML5 function from this page.
    Thanks to Share-

    ReplyDelete
  2. Hi Albin,

    I have a page where I need to show the thumbnail image and provide a download link to download original image.
    If the thumbnail has been cached by dispatcher first, I cannot access the image at DAM path using the download link (not the original rendition). If I use the "original" rendition path, it doesn't get cached in dispatcher.
    The same is also true for pdf assets.
    Did you face this issue at any time?

    ReplyDelete
  3. I am working with AEM, we are authoring responsiveness for carousel component by creating three different tabs for desktop,tablet and mobile. And the image link is got as $column.desktopImage. I created script finding the width and selecting the uri. But when I check with the reponsive it is not dynamic. I need to reload everytime when i select the device. Kindly help me

    ReplyDelete