What are ‘responsive images’?
Using responsive images means loading images that have been specifically sized for the user screen based on breakpoints. This practice makes websites load faster on mobile devices because image sizes are optimized for mobile devices. This is different than fluid images when large images are scaled down with CSS.
The Drupal Kit provides many responsive image configurations, found at Configuration > Media > Responsive Image Styles (
/admin/config/media/responsive-image-style). Developers can reference these in custom image field displays or create new responsive image styles as needed.
The Drupal Kit also defines the screen width breakpoints on which each image derivative should be used. Developers needing to modify the breakpoints can create a file in a sub-theme, as described at https://www.drupal.org/docs/theming-drupal/working-with-breakpoints-in-drupal .
Default configuration settings
utexas_image_styles.breakpoint.yml in the UTexas Image Styles module. The breakpoints are labeled “mobile,” “tablet” and “desktop.” For more information about using breakpoints in Drupal, Working with breakpoints in Drupal is a good resource.