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">
No comments:
Post a Comment
If you have any doubts or questions, please let us know.