Responsive Image support

[mikeprac]

Hi Experts,

Apologies, these are too basic and I already tried to search forum for it but couldn't find right recommendation for it, so thought will pull the brains of the experts on this topic.

I and my team are debating on some of the Asset best practices when it comes to responsive site and wanted to know everyones thoughts on it.

Is it good to fix the aspect ratio of images in the components?

• For e.g. lets say I have component-1 which supports text and image or a banner component made up of just image. Should the aspect ratio be pre-defined for it.
  • The upside of it is, we know how that aspect ratio image needs to be scaled on different viewports. for e.g. if image supported is 1:3 aspect ratio and on desktop it is 300x900, then on tablet we know it is 200 x 600 and on mobile it is 100 x 300 with appropriate quality tuning.
  • But the downside of it is - We are tie-ing the components to a specific aspect ratio image.

Approach-1: Tie components and image aspect ratio

• We know which aspect ratio to pick for the image, and how to scale that aspect ratio image on different viewports.

Approach-2: Use freeform any image in any component.

• Identify the aspect ratio of component programmatically.
• Maintain the mapping of width x height per viewport for that aspect ratio. Based on identified aspect ratio, pick the applicable width, height definition, scale and show the image.
• Still there is a limitation that we cannot support all aspect ratio.
  • Or we derive a formula to evaluate mobile/tablet scaled width and height based on asset aspect ratio.

Approach 2 is definitely doable and provide more flexibility, but is that over-engineering needed? Is there a best practice around components and supporting different aspect ratio image in it?

One last note: We did not want to use adaptive image component, because of 2 reasons:

• Image cropping happens on the fly, which means you loose control on how the image gets cropped.
• with adaptive image, the asset gets stored on the page node itself, because of which you may run into caching implications.

We are also exploring the option of dynamic media, but I am not too sure, if it is going to answer our doubts on components - aspect ratio relationship. Only place it is going to help is for different rendition support.

I would love to hear how people have figured a solve for it.

Thanks in Advance!

[mikeprac]

Trying my luck again.

Any suggestion anyone?

I am sure this is very common problem that everyone would have come across. I would really like to hear how others solved it.

[arunpatidar · Accepted solution]

Hi,

I would go for Approach 2.

• Allow content author to select master image from DAM e.g. assets.jpg
• In HTL , write code to use master image as src e.g. <img src="assets.jpg">
• For other variant/renditions of image you can retrieve using java and store in data attribute <img src="assets.jpg" data-imgSrc="asset.jpg/jcr:content/renditions/cq5dam.thumbnail.140.100.png | asset.jpg/jcr:content/renditions/cq5dam.thumbnail.140.100.png"> and data attribute cab be use for replacement (Optional step)
• On DOM load, you can identify aspect ratio and replace master image with appropriate image.

          <img src="asset.jpg/jcr:content/renditions/cq5dam.thumbnail.140.100.png">

Thanks
Arun