editor_image_styles

Editor Image Styles automatically applies Drupal image styles to inline images and background images in text editor content.
It helps site builders ensure images added through editors like CKEditor 5 and Gutenberg are optimized and consistently styled.

Features

Applies Drupal image styles to inline <img> tags and CSS background-image URLs.
Configurable image style selection (e.g., thumbnail, large, custom).
Supports a base path setting to detect images in content.
Optional support for background images.
Works with any filter-enabled editor such as CKEditor 5 and Gutenberg.

This module is useful when editors insert images directly in text areas but you still want those images delivered through Drupal’s image style system for better performance and design consistency.

Post-Installation

Go to Configuration → Content Authoring → Editor Image Styles and select your preferred settings.
Navigate to Configuration → Content Authoring → Text formats and editors.
Edit the text format you want (e.g., Full HTML or Gutenberg).
Enable the Editor Image Styles filter and place it in the correct filter order (after HTML filtering, before cache filters).

Once configured, images in your text editor content will automatically use the defined image style.

Additional Requirements

No additional modules beyond Drupal core are required.
Compatible with Drupal 10 and Drupal 11.

Recommended modules/libraries

Responsive Image (core) – for advanced responsive image handling.
Image Optimize – for further image delivery optimization.

Similar projects

Filter module (core) – Provides generic filtering but does not support Drupal image styles in editor content.
Responsive Image (core) – Focused on <picture> elements and breakpoints, not inline or background images inside editors.

Editor Image Styles fills the gap by applying Drupal image styles directly to text editor content.

Supporting this Module

Development is community-driven. Feedback, contributions, and issue reports are welcome via the issue queue.

Community Documentation

Project page: Editor Image Styles on Drupal.org
Contributions, demos, and documentation can be shared through the issue queue.