Prerequisite knowledge
- Section 1.3, “Concept: Themes”
- Section 6.11, “Changing Content Display”
- Section 6.12, “Concept: Image Styles”
What are responsive image styles?
The core Responsive Image module provides responsive image styles. This allows you to have images in your website that are specifically sized for different screen sizes. This is useful, for example, to make your site load faster on mobile devices because image sizes are optimized for smaller screens.
A responsive image style is a mapping between image styles and breakpoints. Breakpoints are the points where a responsive design needs to change in order to respond to different screen sizes. Responsive image styles can either work with breakpoints defined in your theme or with breakpoints defined in the responsive image style settings.
When a responsive image style is defined, it can be used in the display settings for Image fields. This allows the site to display responsive images using the HTML5 picture tag, or using the srcset and sizes attributes in an img tag, depending on how the responsive image style is set up.
Related topics
Section 6.3, “Adding Basic Fields to a Content Type”
Additional resources
Attributions
Adapted by Boris Doesborg from Responsive images, copyright 2000-2025 by the individual contributors to the Drupal Community Documentation.
