You can embed images in your text fields from CKEditor using the Media Entity Browser, which works well. You can choose an image style and position the image as you choose.

What is missing from this process however, is the ability to embed responsive images.

You can embed responsive images using the Inline Responsive Images module, but this only works with the core Image embed functionality, it does not work with the Media Entity browser.

This module provides the ability to embed responsive images from the media entity browser.

Installation

Install the module
Select the text format that you wish to configure at /admin/config/content/formats e.g. 'Basic HTML'
Enable the text format filter 'Display responsive images in Media Entity Browser' and select the images styles/responsive styles that you want to be available to the user.

Make sure that the 'Limit allowed HTML tags' text filter is enabled but you will need to add the following to the 'allowed tags'
list:

<drupal-entity data-* data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align
 data-caption data-embed-button alt title class> <picture data-* alt title class> <source srcset media type>

Make sure that the 'Restrict images to this site' text filter is disabled.
The user will then be prompted to select a responsive image style when inserting an image via CKEditor

Dependencies

responsive_image
editor
image
media_entity_browser
media
entity_embed
embed

If you are having difficulty getting the Media Entity Browser configured and working in your site, then follow these instructions:

composer require drupal/media_entity_browser:^2.0 (use the 2.x branch as we are using core media)
composer require drupal/entity_embed
drupal moi media_entity_browser entity_embed embed
Then go to /admin/config/content/embed and create an ‘image embed’ button (Embed type: entity, Entity type: media, Media type: image, Allowed Entity Embed Display plugins: thumbnail, Entity Browser: Media Entity Browser, Entity Browser Settings: Display the entity after selection)
Then add this new button to the toolbar under ‘basic html’ text format (or whatever one you like)
Check the ‘display embedded entities’ checkbox and save

Credits

This module is essentially an adaptation of the Inline Responsive Images module, so many thanks to betawerk, keithm and jeroen_betawerk

Media Browser Responsive Images

Issues

Automated Drupal 10 compatibility fixesRTBCCode Created over 2 years ago

Automated Drupal 10 compatibility fixes
RTBC
Code
Created over 2 years ago