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="[email protected] 1x, [email protected] 2x, [email protected] 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.