Responsive images

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.

– https://www.drupal.org/docs/mobile-drupal-sites/responsive-images

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

Breakpoint groups:

The default breakpoints are defined in 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.

Viewport sizing: (ex. 1X and 2X)

Viewport Sizing breakpoint fieldsets control which image style (or styles) are used. The Drupal Kit defaults to “Select a single image style,” using just one image style for each breakpoint. For retina screens (2X multipliers) image styles are set that double the 1X style.

Fallback image style

The fallback image style is typically the smallest size image you expect to appear in this space. In older browsers which may not understand the newer HTML5 attributes and elements, the image style set here would be used.

Note

Responsive images and retina displays:

Implementation of responsive images can suffer from an issue described in this article:. On retina displays, an incorrect half sized version of the image can be served. The workaround implemented in the UTDK is to make the image width 100%, so that the image will stretch and fit no matter what on retina displays. This is something developers venturing into responsive images should be aware of as more and more devices implement retina displays.

For more information, see the following articles:

Responsive Images in Drupal

Fundamentals of Responsive Images