I have multiple images in a page (for example, site logo, other promotional images etc). I want to add width and height attribute (with actual image size) to each of <img> tag. Options I see are as below.
1. Check for each of the page when it is loaded and add the attributes. Not sure if it is feasible or how to implement it.
2. Update all the components using <img> tag and fetch actual dimensions for related images by fetching them through AssetDetails in Java. It will require update to many component files (roughly 70).
Any suggestions for which route to take and what are the solutions for option 1?
You do not have to apply at each of the page level. It can be applied via CSS at component level.
Let's say you have a logo component which is used to author the site logo across all the pages. Then you can apply a class to the <img> and apply the CSS property to it which will apply the height and width to the asset across all the page wherever the logo image is used.