[[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 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.

==== 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"]

* https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset[Blog post "Responsive Images in Drupal 8 using 'srcset'"]

*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].
