Implemented Deliver Width and Height in Image to prevent CLS

Hi Ruud,

here is Markus again, today with a suggestion or feature request.

I had choosed to use your plugin to improve the user experince because the shrinked images are faster to transfer and display. Today I take a close look to how browser deals with the images on the page and I noticed that your plugin can cause cumulative layout shifs (CLS), because the Browser just dont know how the aspect ratio and the native size of the image before loading it. This slow down a bit the total load time of the page becaus as CLS is in case of large shifts a rather expensive operation for the browser. Aditionally, the user could experinced a quite restlest page load if he has a slow internet speed because the page will shown without the images first and after the images start to load, the text moves down as the browser needs to make space for the images.

I´ve run some tests and if the image contains width and height attributes than the browser could reserve the correct needed space for the image initialy and no CLS occours. My images in the article do not have any size attributes and my previously used thumbnail plugin has set this attributes.

So my suggestion is to set image width and height if missing in original tag:
<img scr="images/myImage.jpg" width="400" height="600" srcset="..." sizes="..." />

I´m not sure if it is possible that images with theese attributes could display other than without width and height. These attributes has lower rank than any width and height settins in css or inline style, but I don´t know if the fact that previously maybe no one set explizit width and height informations could leed to other results than when width and height Informations are set explizit. If you want to be sure, a new configuration flag controlling wheter to set width and height will be the safest way to be backward compatible.

For me, it looks like your plugin already load the size information from the image so it might be possible with moderate efford to deliver theese informations with the srcset image.

I hope this suggestion to provide better and faster user experince sounds good to you and you are able to implement width and height informations.

For now, I wish you happy holidays!

Regards

Markus
DOWNLOADLINK

Markus Bruhn wrote:

Hi Ruud,

here is Markus again, today with a suggestion or feature request.

I had choosed to use your plugin to improve the user experince because the shrinked images are faster to transfer and display. Today I take a close look to how browser deals with the images on the page and I noticed that your plugin can cause cumulative layout shifs (CLS), because the Browser just dont know how the aspect ratio and the native size of the image before loading it. This slow down a bit the total load time of the page becaus as CLS is in case of large shifts a rather expensive operation for the browser. Aditionally, the user could experinced a quite restlest page load if he has a slow internet speed because the page will shown without the images first and after the images start to load, the text moves down as the browser needs to make space for the images.

Hi Markus, just to correct this, what my plugin does is use what is offered and create a source set with this information. It is not the responsibility of the plugin to add the width / height when it is not in the source img element. When width and height is set in the source, it will respect and use that.

I´ve run some tests and if the image contains width and height attributes than the browser could reserve the correct needed space for the image initialy and no CLS occours. My images in the article do not have any size attributes and my previously used thumbnail plugin has set this attributes.

So my suggestion is to set image width and height if missing in original tag:
<img scr="images/myImage.jpg" width="400" height="600" srcset="..." sizes="..." />

I´m not sure if it is possible that images with theese attributes could display other than without width and height. These attributes has lower rank than any width and height settins in css or inline style, but I don´t know if the fact that previously maybe no one set explizit width and height informations could leed to other results than when width and height Informations are set explizit. If you want to be sure, a new configuration flag controlling wheter to set width and height will be the safest way to be backward compatible.

For me, it looks like your plugin already load the size information from the image so it might be possible with moderate efford to deliver theese informations with the srcset image.

Actually, that information is only available on creation of the resized (cached) images as reading that information on every page generation would have an impact on performance. Furthermore as you pointed out, the width and height of the original image on disk is not guaranteed the width and height it is inserted in: you can upload a 1200px image and display that with 600px width. To make this even more 'complicated' when a device width is 600px and it has a dpi of 2 then the browser will use and display the 1200px image (if offered in the scrset). So using the image size to set the width and height is not advised.

To prevent CLS you should set the width / height on the source of the image (as all regular editors I use automatically do).

Setting it via the plugin would mean breaking things for users who have (e.g. a responsive) site where width / height is dependent on css / media classes, also there are a lot of places where images are displayed on a page: an image in a blog, but also the logo, where the blog would need the size but the logo not. There is no way to configure that in an easy way while supporting all possible use cases.

I hope this suggestion to provide better and faster user experince sounds good to you and you are able to implement width and height information.

For now, I wish you happy holidays!

Regards

Markus

To prevent CLS you should set the width / height on the source of the image (as all regular editors I use automatically do).

How could I set width / height for the Article Intro and Full Article Image (seccond tab in Article)? Expecially for the Full Article Image the CLS is something to avoid because in many cases this image is show above the Fold.

Hi Markus,
these should be handled by your template.
But here you will directly see the 'challenge': as the template (php) is server side and cannot differentiate between devices (mobile / desktop), what value do you set as these can be different per device?

That is probably the reason why the 'fixed' size is not set and it will be set via css (either with a value based on device width, of with a percentage).

Sorry for the delay, I had a busy week and I wanted to do some research before answering.

When it comes to responsive design, I personally would almost never use fixed sized images because they could be too large for the specific device. I use something like max-width: 100% in CSS to ensure the image is never larger than the screen. I'm always overrule by CSS how large a image is allowed to display (in some case through media queries, too). By constraining only max-width and min-width instead of overriding width directly, the browser could use the now only desired width and height attributes in the image tag to calculate the aspect ratio and the final image size. In that way the browser avoid CLS and the image is displayed in an appropriated size in respect to the client screen size.

You said, that your plugin have width and height information only during cache generation and it you are worried about performance impacts. I run some tests and I was able to deliver width and height attributes also for cached images in the setImagesValues-Function:

I guess you need the size informations to decide whether delivering the image for these breakpoint with the size configured in the breakpoint or with the max size of the image. I do agree that setting width and height with your plugin could break layouts, but by providing a flag it seems to be fine for me and it would not have any performance impact. When you already have the informations, it wont´ hurt to give an option to ship these informations to the client. 
Yes, setting width and height by article editor help for many places, but there are many other places like intro image or images placed by plugins where the plugin just grab the configured image path and put it in an image tag without retriving width and height attributes. It seems unrealistic for me that every joomla plugin would implement a way to output the native image size.
Setting always width and height in images is advised in multiple sources, eg www.smashingmagazine.com/2020/03/setting...ges-important-again/ or web.dev/optimize-cls/?utm_source=lightho...ensions-%F0%9F%8C%86
It would be a goodie in your plugin that seems to fit well with your plugin, like the goodie to enable HTML cleanup.

 

Hi Markus, I did a deeper dive into the CLS and how the width / height are used for preventing it.
I made the assumption that when set they would take precidense over other setting or they would complicate / break things.

This is not the case.

So i have added a config toggle. New version is in the download location in first post (it is the file with the newest date).
So if you could test if it works, but also reflect on the config setting label / description that would be great!

Fantastic!
I've tested your new Version. I ran some tests for different szenarios (eg smaller size is set by editor or new flag enabled / disabled). Everything works as expected.
The config setting label and description looks fine, too. Great job!

Thanks for testing and thanks for proposing this change.
Will be in next release. You can install the new release over your test version when prompted.
regards,
Ruud.

Just released version 1.16.0 with this feature implemented