Prerequisites

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.