6.14. Concept: 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.

Section 6.3, “Adding Basic Fields to a Content Type”

Attributions

Adapted by Boris Doesborg from Responsive images, copyright 2000-2024 by the individual contributors to the Drupal Community Documentation.