Inserting images should default to 50% of the editable

[Witoso]

We had a discussion around the experience of inserting images. Currently, the images can be very large in resolution, and will most likely cover 100% of the editor. It's not the best UX. The content may jump a lot, will be lost etc.

https://github.com/ckeditor/ckeditor5/assets/9881379/471f0564-a848-463f-8361-b9f62c065f30

Scope

• When inserting an image into the editor, and there's the ImageResize plugin, resize the image to 50%.
• Add a config option to ImageResize, which could configure this (resizeOnInsert?): false, or any other value.

Questions

• What if the image resize is in px?
• how will the user know it's resized? Should they know? They see the size, and can compare it to the content's width.
• Is 50% ok to be a default?

[Witoso]

@dagdzi, @Reinmar curious about your thoughts.

[Witoso]

Thoughts after the refinement, users may be confused what happened to the image, did it shrink in size, etc.?

Maybe a better option is to have it as an opt-in?

[Reinmar]

Maybe a better option is to have it as an opt-in?

This is a base UX-related option and having it as opt-in will mean that:

• we'll have to set it everywhere in our docs/demos configs,
• >99% of integrators won't learn about it.

If we think that the 100%-wide images are a problem, this should be configurable, but enabled by default.

• how will the user know it's resized? Should they know, they see the size, and can compare it to the content's width.

This is a very good question... It may be slightly confusing. I don't know any other app that scales them down.

• What if the image resize is in px?

Good question again. And I think we could just calculate 50% of the editor's area width.

I'd add one more thing: Should vertical and horizontal images be treated similarly? A vertical image scaled to 50% looks, to me, relatively well. But a horizontal one looks odd – 75% would make more sense. And sometimes perhaps even 100% would be preferable. But if we make it too dynamic it may become too unpredictable and confusing.

So, I really miss seeing how users react to this in real life :( Which might not be easy to get.

[Witoso]

On our design guild meeting, we could give an obvious declaration that 50% (or any other value) is the sanest default. This comes together with a tricky technical implementation.

But we agree that certain pages/apps might have such need. Like us in the docs with high-resolution images.

The idea would be to give this possibility as an opt-in. Integrators who know best their apps, can define the default size, e.g.

resizeOptions: [
            {
                name: 'resizeImage:original',
                value: null,
                icon: 'original'
            },
            {
                name: 'resizeImage:50',
                value: '50',
                icon: 'medium',
                default: true // <- makes the inserted images 50% by default.
            },
            {
                name: 'resizeImage:75',
                value: '75',
                icon: 'large'
            }
        ],

This could be later (at the same time) implemented for image styling. To define a default style (class) of an image.

[Sebastianyang666]

I have the same problems,we are using the classic framework which didn't support resizeImage buttons.the uploader pics from users always too large.here are my two ways.

1.to set pics' width 50% in image.css file. the questions is the blue lines behind pics cannot escape at first time,now. 2. I am still thinking how to set center as default,not full.

if it has any better solves ... ?

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).