How To Specify Image Dimension To Avoid Cumulative Layout Shift (CLS)

[mentalizzz]

Hello Pablo and friends.

I checked my website using Google Page Speed Insight and I got bad score Cumulative Layout Shift (CLS). To solve this I have to add width and height for my image from <img src="images/example.jpg" id="Image1" alt=""> to <img src="images/ABC.jpg" width="640" height="360" id="Image1" alt="">.

Is there a way to specify image width and height using WYSIWYG Web Builder just like the bold code above without manually change the code directly from the inside of CPanel?

[BaconFries]

Similar question at the following click on the upwards arrow beside Pablo wrote

What exactly did you do?

Note that for flexible layouts the image size is not defined, otherwise the image would not be responsive.

[mentalizzz]

Similar question at the following click on the upwards arrow beside Pablo wrote

What exactly did you do?

Note that for flexible layouts the image size is not defined, otherwise the image would not be responsive.

So what should I do @BaconFries so I can avoid this CLS problem without adding the additional code for image dimension? Because my pages mostly using layout grids.

When I experimented to change the image dimension code manually using CPanel HTML editor and after that tested it on Page Speed Insight, weirdly the CLS problem was gone but there was new problem I got bad score Largest Contentful Paint (LCP).

IF what you and Pablo already said that flexible layouts the image size is not defined, then I should avoid to change the image HTML code. But please guide me another way on how to fix this CLS for the image of my website.

[Pablo]

If you are using flexible layout then the size of the image will not be included otherwise it affects the layout. Then you will get a fixed image instead of a flexible image.
You can add the code yourself via Object HTML, but you may run into issues with the layout not being flexible.

[mentalizzz]

If you are using flexible layout then the size of the image will not be included otherwise it affects the layout. Then you will get a fixed image instead of a flexible image.
You can add the code yourself via Object HTML, but you may run into issues with the layout not being flexible.

Thank you Pablo for your explanation.