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.