Responsive images

[Diewy]

When adding an image with a transform, I typically choose the exact size it will be displayed. For example, if an article body is 700px wide, I add a transform to set the image width to 700px. However, this approach leads to blurriness on high-density displays, such as those on MacBooks.

Is there a way to support responsive images via CKEditor?

Currently, the output looks like this:

Now the output is

<img src="image.webp" width="700" height="600">

I aim to support 2x displays, so ideally, the output should resemble:

<img src="image.webp" srcset="image@1x.webp 1x, image@2x.webp 2x, image@3x.webp 3x" width="700" height="600">

I could use a transform for 1400px, but this would load the larger image on every screen, which is not ideal, especially on mobile devices.

In the meantime, I'm adding images via a nested Entry so I can control the Twig output and apply the desired transforms.

[brandonkelly]

In the meantime, I'm adding images via a nested Entry so I can control the Twig output and apply the desired transforms.

That’s the best way to do it for now. We should be able to start injecting srcset attributes into the <img> tags when rendering the fields for the front-end though. We’ll look into that.

[OscarKanNilsson]

Any updates on this? CkEditor support source and srcset.
Is there a way to activate PictureEditing?
https://ckeditor.com/docs/ckeditor5/latest/api/module_image_pictureediting-PictureEditing.html

[CreateSean]

I too would like to see this added in.