[[structure-image-responsive]]

=== Concept: Responsive Image Styles

[role="summary"]
Overview of responsive image styles, which allow you to provide different images for different screen sizes.

(((Responsive image style,overview)))
(((Image style,responsive)))
(((Breakpoint,overview)))
(((HTML5 picture tag,and responsive images)))

==== Prerequisite knowledge

* <<understanding-themes>>
* <<structure-content-display>>
* <<structure-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 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.

==== Related topics

<<structure-fields>>

==== Additional resources

* https://www.drupal.org/node/1388492[_Drupal.org_ community documentation page "Responsive web design"]

* https://www.drupal.org/docs/8/mobile-guide/responsive-images-in-drupal-8[_Drupal.org_ community documentation page "Responsive images in Drupal 8"]

* https://www.drupal.org/docs/8/theming-drupal-8/working-with-breakpoints-in-drupal-8[_Drupal.org_ community documentation page "Working with breakpoints in Drupal 8"]


*Attributions*

Adapted by https://www.drupal.org/u/batigolix[Boris Doesborg] from
https://www.drupal.org/docs/8/mobile-guide/responsive-images-in-drupal-8[Responsive
images in Drupal 8],
copyright 2000-2017 by the individual contributors to the
https://www.drupal.org/documentation[Drupal Community Documentation].
