# Concept: Responsive Image Styles

## Prerequisite knowledge

* [Concept: Themes](/link/683)
* [Changing Content Display](/link/730)
* [Concept: Image Styles](/link/731)
## 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

[Adding Basic Fields to a Content Type](/link/722)
## Additional resources

* [_Drupal.org_ community documentation page "Responsive web design"](https://www.drupal.org/docs/mobile-guide/responsive-web-design)
* [_Drupal.org_ community documentation page "Responsive Images"](https://www.drupal.org/docs/mobile-guide/responsive-images)
* [_Drupal.org_ community documentation page "Working with breakpoints in Drupal"](https://www.drupal.org/docs/theming-drupal/working-with-breakpoints-in-drupal)
* [Blog post "Responsive Images in Drupal 8 using 'srcset'"](https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset)