...
The picture element works similarly to the video element; a wrapping element contains multiple source elements. This allows the browser to decide which source to use under a certain set of criteria. In the case of the picture element the criteria is set by the 'media' attribute which contains a CSS media query that informs the browser under which circumstances the given source should be used.
Bootstrap
If you are using the Bootstrap grid framework then the following tool could be helpful: https://kalamuna.github.io/bootstrap-picture-srcset-generator/
When given an aspect ration, this tool generates picture/source markup based on how many grid units wide you want your image to be at any given breakpoint. This markup can be copied directly into html templates or alternatively you can use the image widths and heights generated at each breakpoint to inform the creation of Drupal image styles and responsive images.
TODO:
Drupal config
Best practices
...