How to disable images from adding aspect ratio and dimensions

[nfplee]

I have a custom plugin which calls the following:

editor.execute('imageInsert', { source: '/images/img.jpg' });

Recently my staff have reported that it adds the following attributes:

• style="aspect-ratio:1024/768;"
• width
• height

This causes problems for me, I was wondering if there was a way of disabling this behaviour or is there an alternative command I should execute?

[mmotyczynska]

We set the width and height for images to ensure the space required for the image is reserved when the page loads. The aspect ratio is used when resizing the image, which is especially important for images that are not proportional. These values are set when adding a new image to the editor.

The width and height attributes are set for the image, but they can always be changed using styles. There is no alternative command that omits these values, so please ensure to check the following:

• Ensure that the editor styles are correctly added, as some features, such as image handling, require additional styling. Even if the styles are added, they might be outdated.

• Perhaps this comment will be helpful.

If the above suggestions do not help, please provide more information. It would be helpful if you could describe in detail the kind of problems you are encountering, including what results you are currently seeing and what your expected results are. Are the issues due to the width and height settings, the aspect ratio, or both?

[nfplee]

Thanks, I've spoke to one of the developers on our team and they have a workaround.

[jsfgreen]

@mmotyczynska Is there a way to keep the width/height attributes and only get rid of the inline style="aspect-ratio: ..."? Reporting tools (such as PageSpeed Insights) are flagging the inline style tag as an "HTML quality issue" which is egregious and serious.

This is not really overlook-able.

[Witoso]

@jsfgreen thanks for info, could you share a screen of such audit or mention other tools, I cannot reproduce this is PageSpeed. Inline styles are used by us in many features, due to the nature of the editor's work.

[jsfgreen]

@Witoso Yes, sorry, I was only using PageSpeed Insights as an example of the type of audit tools. In this case it was SEOptimer.

At any rate, it should be a given that these exact types of things matter to people and assumed that somebody, anybody, many people, would want to change them. That and the fact that setting aspect-ratio is superfluous being that the browser calculates that anyway based on the provided width and height attributes.

[Witoso]

As I said, multiple features of the editor use inline styles (tables, alignment, fonts), and due to the nature of the editor we will keep using them.

it should be a given that these exact types of things matter to people and assumed that somebody, anybody, many people, would want to change them.

This was brought up only in the scenario of more complex platforms (CMS) that want to have full ownership of how images are downcasted to HTML. After almost a year after implementation, we haven't received any issues about it until this one AFAIR.

That and the fact that setting aspect-ratio is superfluous being that the browser calculates that anyway based on the provided width and height attributes.

We added it to support the migration from CKEditor 4 to 5, as well as future improvements. In some editors (CKEditor 4 included) it's possible to resize a picture with unlocked aspect-ratio. We added it to support this scenario. More about the changes here.

If this doesn't fit your use case, it's always possible to overwrite the pipeline of image downcasting. We have an example of that for images, but I need to search for it. Stay tuned!