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 images 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 only be used if the breakpoints are defined in the theme.

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.

「Adding Basic Fields to a Content Type」

Attributions

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