I’m trying to improve the CLS on my website by modifying my images as per the Google Page Speed official guide. I have a JPG image with an intrinsic size of 500 x 281 px, hence I add the below HTML as a test:
<img src="..." width="1280" height="720">
The problem with this is that the actual aspect ratio of the image now depends on the view port and container – meaning that the aspect ratio becomes incorrect. My expectation was that the above would ensure that the image would have a width of 100% of the container and resolve the CLS issues, while retaining the correct aspect ratio.
Can anyone clarify what the correct implementation looks like? At the end of the day, I’m looking to have the same result as when not setting height/width explicitly (i.e. my image retains the correct aspect ratio and scales with the viewport) – while ensuring that the right height is allocated upfront to avoid CLS issues.