src and srcset
src is a simple attribute used in multiple elements that specifies a path to something the element will load. Even HTML beginners know about src. If you specify a srcset instead, you should still include src as a default fallback, kind of like in a C# switch statement. As for the point of srcset, you can specify a list of as many images as you want, along with the width of each image. Then, based on pixel values, the browser will pick the best image for the situation.
sizes
To have even more control over what the browser loads, you can specify sizes. I was a little surprised by the browser not knowing about what CSS will apply when it reads the HTML, but my best assumption is that they get read in order with HTML coming first. Anyways, sizes allows you to tell the browser what sizes images will be at specific widths after CSS. If you don't have any sizing applied to your images, then this attribute wouldn't matter.
Art Direction
That's great and all, but it looks like a lot more work, so why do it? Well, it is a lot more work since you need to make different sized copies of the same image, as well as know what's specifically happening in your CSS to work with the sizes attribute. However, if you need a highly optimized site, then this concept of art direction should be applied. Responsive images is just one aspect of art direction, but images are arguably the most looked-at parts of a site, so I'd say it's more important than the other topics like typography.
Summary
With some effort, images can become a more thought-out aspect of your sites. Srcset and sizes are slightly newer and not always fully supported attributes, but that's why src provides a default fallback. Without some art direction, your site may feel pointless or be unpleasant to use.