...
Often these techniques are used in unison because the first ensures image are visually the correct size whereas the second ensures that we are not wasting bandwidth by serving really large images to really small devices.
Here is a really good overview/primer explaining some of the high level concepts: https://www.lullabot.com/articles/fundamentals-of-responsive-images
CSS
The first technique is fairly straight forward and can be achieved with the following css:
...
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 Given an aspect rationratio, 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.