Make sure both Drupal core modules Breakpoint and Responsive image are enabled.
Defining responsive image styles
Go to /admin/config/media/responsive-image-style and click Add responsive image style to create a new style
Use responsive image styles in Image fields
After defining responsive image styles, you can use in the display settings for your Image fields, so that the site displays responsive images using the HTML5 picture tag. Open the Manage display page for the entity type (content type, taxonomy vocabulary, etc.) that the Image field is attached to. Choose the Responsive image format, click the Edit icon, and select one of the responsive image mappings that you have created.