Image plugin doesn't handle width/height in attributes

[jswiderski]

📝 Provide detailed reproduction steps (if any)

Recently we have improved GHS to preserve image width and height attributes #9916 but the Image plugin itself doesn't seem to handle them. 

1. Set GHS to allow everything. 
2. Set editor data to this HTML <p><img alt="oracle" height="13" src="https://upload.wikimedia.org/wikipedia/commons/5/50/Oracle_logo.svg" width="100" /></p>

✔️ Expected result

CKEditor displays image with proper width/height

❌ Actual result

 

Editor sets style for width/height to 0 and values from attributes are not taken into account. 

What is the actual result of the above steps?

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

• Browser: Any
• OS: Any
• First affected CKEditor version: 1.0.0
• Installed CKEditor plugins: image

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[jsfgreen]

This is very important especially nowadays with PageSpeed Insights and Chrome's Lighthouse (among other 3rd party tools) which rate web page metrics for performance and other things and punish sites' scores for CLS (content layout shifts). An image without width and height attributes in 2023 is just completely outta the question. I understand the removal of the dialog window that CKE4/CKFinder had which allowed for setting multiple image attributes; but the width and height should be just automatic or there needs to be some exposed API like an event to listen on when an image is added so the attributes can be added easily. This was relatively easy to do in CKEditor 4 but appears overengineered in CK5 and so far I haven't found anything explaining on how to add a hook or something to add image attributes when an image is inserted into the editor.

If there is a way to do this can you guys at least explain how we can do it?

[Witoso]

@jsfgreen the effort to add those attributes on upload, as well as support the content that already has them, is in progress. We will soon share with the community options to test it out. You can also read #14146 for details.

[jsfgreen]

@Witoso Oh ok thank you for the quick response! Will #14146 also address images added by CKFinder?

[Witoso]

Yes, we will try to make it transparent and work out of the box for integrators :) cc: @mmotyczynska

[Witoso]

The implementation is close to completion, but we would love to hear some feedback. The details are gathered in the comment.

[Witoso]

🎉 This feature was merged to the master and is available on the nightly releases and nightly docs to test.

In a comment in another issue, you can find more details about the changes.

[knightcode]

How do we turn this off? It doesn't play well with CSS.

[jsfgreen]

How do we turn this off? It doesn't play well with CSS.

Believe me, it's much better to have the attributes and aspect ratio. You can easily make your images 'fluid' again by setting:

img {
  max-width: 100%;
  height: auto;
}